$(this) 选择器在 jsfiddle 中有效，但在我的脚本中无效

Question

查看 jsfiddle 示例...http://jsfiddle.net/nnmEY/21/

Objective...

通过 select 菜单和/或通过直接输入修改 textarea，并将 textarea 值传递给 div。

问题...

1.) 下面示例最底部的脚本在 jsfiddle 中运行良好，但在示例中却不行。

2.) 我也在尝试找出第一个脚本的最佳逻辑，即在将值从 .ta(textarea) 传递到 .tatx(div 文本）。当您在 select 菜单中 select 三个或更多选项时，您会看到问题。我在考虑 replaceWith() 但我无法让它工作。

非常感谢任何帮助。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<style>
    li {margin-bottom:7px; background:#DDD; padding:5px;}
    #par {width:350px;}
    .tatx {color:#C00;}
</style>

<div id="par">
<ul>

<li>
Select an option, then, select another option.<br>
<select class="sl">
    <option value="item 1">option 1</option>
    <option value="item 2">option 2</option>
    <option value="item 3">option 3</option>
</select><br>
<p>Selected options values are passed to textarea<br>
<textarea class="ta"></textarea>
<p>Textarea value is passed to div as text
<div class="tatx">Div Text</div>
</li>
<li>
Select an option, then, select another option.<br>
<select class="sl">
    <option value="item 1">option 1</option>
    <option value="item 2">option 2</option>
    <option value="item 3">option 3</option>
</select><br>
<p>Selected options values are passed to textarea<br>
<textarea class="ta"></textarea>
<p>Textarea value is passed to div as text
<div class="tatx">Div Text</div>
</li>
<li>
Select an option, then, select another option.<br>
<select class="sl">
    <option value="item 1">option 1</option>
    <option value="item 2">option 2</option>
    <option value="item 3">option 3</option>
</select><br>
<p>Selected options values are passed to textarea<br>
<textarea class="ta"></textarea>
<p>Textarea value is passed to div as text
<div class="tatx">Div Text</div>
</li>

</ul>
</div>

<script>
$(document).ready(function(){
    $('li > .sl').on('change', function() {
    var taVal = $(this).siblings().find('.ta').val();
    var tatxVal = $(this).siblings('.tatx').html()
    var slVal = $(this).val() + '\n';
    var slHtml = $(this).val() + '<br>';
    $(this).siblings().find('.ta').val(slVal + taVal);
    $(this).siblings('.tatx').html(slHtml + taVal);
});
});
</script>
<script>
$(document).ready(function(){
    $('li > .ta').keyup(function(){
        $(this).next('.tatx').html($(this).val());
    })
});
</script>

Answer 1

实际上jsfiddle示例没有任何问题。你打错了。因此它称为未定义。也许，这就是你的意思？

这是您的脚本，效果很好：

<div id="par">
    <ul>
        <li>
            <p>Selected options values are passed to textarea</p>
            <select class="sl">
                <option value="item 1">option 1</option>
                <option value="item 2">option 2</option>
                <option value="item 3">option 3</option>
            </select>
            <br />
            <br />
            <p>Selected options values are passed to textarea</p>
            <textarea class="ta"></textarea>
            <div class="tatx">Div Text</div>
        </li>
        <li>
            <p>Selected options values are passed to textarea</p>
            <select class="sl">
                <option value="item 1">option 1</option>
                <option value="item 2">option 2</option>
                <option value="item 3">option 3</option>
            </select>
            <br />
            <br />
            <p>Selected options values are passed to textarea</p>
            <textarea class="ta"></textarea>
            <div class="tatx">Div Text</div>
        </li>
        <li>
            <p>Selected options values are passed to textarea</p>
            <select class="sl">
                <option value="item 1">option 1</option>
                <option value="item 2">option 2</option>
                <option value="item 3">option 3</option>
            </select>
            <br />
            <br />
            <p>Selected options values are passed to textarea</p>
            <textarea class="ta"></textarea>
            <div class="tatx">Div Text</div>
        </li>
    </ul>
</div>

<script>
    $(document).ready(function () {
        $("li > .ta").keyup(function () {
            $(this).next('.tatx').html($(this).val());
        })
    });
</script>
<script>
    $(document).ready(function () {
        $('li > .sl').on('change', function () {
            var taVal = $(this).siblings().find('.ta').val();
            var tatxVal = $(this).siblings('.tatx').html();
            var slVal = $(this).val() + '\n';
            var slHtml = $(this).val() + '\n'+'<br />';
            $(this).siblings().find('.ta').val(slVal + taVal);
            $(this).siblings('.tatx').html(slHtml + tatxVal);
        });
    });
</script>

要查看演示，请再次查看 here. or in jsfiddle。

$(this) 选择器在 jsfiddle 中有效，但在我的脚本中无效

$(this) selector works in jsfiddle but not on my script

jquery

this

argument-passing

replacewith