$(this) 选择器适用于 jsfiddle 但不适用于我的脚本 [关闭]

Question

参见 jsfiddle 示例...http://jsfiddle.net/nnmEY/21/

目标...

通过选择菜单或直接输入修改 textarea 并将 textarea 值传递给 div。

问题...

1.) 下面示例底部的脚本在 jsfiddle 中可以正常工作，但在示例中却不行。

2.) 我还试图找出第一个脚本的最佳逻辑，即在将值从 .ta(textarea) 传递到 .tatx(div text) 时如何将“\n”转换为“br”。当您在选择菜单中选择三个或更多选项时，您可以看到问题。我正在考虑 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。或jsfiddle。