-2

代码...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#add_variation").click(function(){
        var tag_val = $("#materials_input").val();

        // check if tag already added
        $("#adding_area_result").each(function() {
            if($(this).text() == tag_val){
                alert("same value again");
                return false;   
            }else{              
                // insert tags
        $("#adding_area_result").add('<li><span rel="variation_area" class="variation1_tag">'+tag_val+'</span><input type="hidden" name="variation1[]" id="variation1" value="'+tag_val+'" /></li>').appendTo("#adding_area_result");   
            }
        });


    });
});
</script>

</head>
<body>
<br>

<input type="text" maxlength="2048" class="text" name="materials_input" id="materials_input" />
<br>
<br>
<input type="button" value="Add" class="button-medium" id="add_variation" />
<div id="adding_area_result">

</div>
</body>
</html>
4

4 回答 4

1

使用下面的代码。也许它会帮助你。

        <!DOCTYPE html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#add_variation").click(function(){
        var tag_val = $("#materials_input").val();
        // check if tag already added

        var check_val ='';
        $(".adding_area_result li span").each(function() {
            if($(this).text() == tag_val){
                alert("same value again");
                check_val = '1';
            }
        });
            if(check_val == '')
            {
                $(".adding_area_result").append('<li><span rel="variation_area" class="variation1_tag">'+tag_val+'</span><input type="hidden" name="variation1[]" id="variation1" value="'+tag_val+'" /></li>');   
            }
            $("#materials_input").attr('value','');
    return true;


        });
    });
    </script>

    </head>
    <body>
    <br>

    <input type="text" maxlength="2048" class="text" name="materials_input" id="materials_input" value=""/>
    <br>
    <br>
    <input type="button" value="Add" class="button-medium" id="add_variation" />
    <ul class="adding_area_result">

    </ul>
    </body>
    </html>
于 2013-05-06T12:54:26.420 回答
0

发生这种情况的原因是，当您调用 .text() 时，它会返回由周围 HTML 引起的带有空格的文本，从而导致匹配失败。您可以将一个类添加到您的内部跨度标记，然后使用它来获取文本以进行比较。

这是一个展示这一点的 JSFiddle：http: //jsfiddle.net/ZzdX9/

具体变化是：

if($(this).find(".tag").text() == tag_val)
{
    alert("same value again");
    return false;   
}

然后将“标签”类添加到您注入的 HTML 中。

于 2013-05-06T13:00:26.350 回答
0

除了评论者指出的其他问题外，您还将 html 添加到#adding_area_result两次。add方法和方法都appendTo将html添加到所选元素，因此您只需要一个。您可以append像这样使用方法：

$("#adding_area_result").append('<li><span rel="variation_area" class="variation1_tag">'+tag_val+'</span><input type="hidden" name="variation1[]" id="variation1" value="'+tag_val+'" /></li>')
于 2013-05-06T12:56:12.943 回答
0

更改代码以使用当前元素的数量为隐藏元素插入新的 id。这是一个非常冗长的示例，您可以将其重构为更简洁。

function addNewElement(newIndex, tag_val, element) {
    element.append('<li><span rel="variation_area" class="variation1_tag">' + tag_val + '</span><input type="hidden"  id="variation' + newIndex + '" value="' + tag_val + '" /></li>');
}
$("#add_variation").on('click', function () {
    var tag_val = $("#materials_input").val();
    var group = $(".adding_area_result");
    var newIndex = group.find('.variation1_tag').length ? group.find('.variation1_tag').length + 1 : 0;
    var isDuplicate = false;
    // add a new one
    if (newIndex) {
        group.find('.variation1_tag').each(function () {
            if ($(this).text() === tag_val) {
                isDuplicate = true;
            }
        });
    }
    if (!isDuplicate) {
        addNewElement(newIndex, tag_val, group);
    }
});
于 2013-05-06T13:10:28.837 回答