Question

在此项目中，用户可以添加和编辑标签。有一个标签容器，一个编辑文本框和按钮，以及一个添加文本框和按钮。我有一个选择列表，用于跟踪更改，并在其索引中包含标记的数据库ID。

当我使用我的jQuery库版本（1.10.2）运行我的代码时 - 标记按钮之间的单击不会一直影响列表。实际上，只有第一个按钮单击才会更改列表中的选定项目。

当我将这个代码应用到一个低于我的jQuery库（1.7.2）的小提琴时 - 列表会响应我所期望的，在你单击标签按钮时更改它所选的项目。

这是我的代码，以及工作小提琴。在小提琴中的jQuery库之间切换将证明这个问题：

HTML：

        <!-- tags container -->
        <div class="container_12">
            <div class="grid_2"><img src="images/spacer.png" /></div>
            <div id="content" class="grid_8">
                <button id="PHP" name="PHP" class="tag-button">PHP</button>
                <button id="CSS" name="CSS" class="tag-button">CSS</button>

            </div>
            <div class="grid_2"><img src="images/spacer.png" /></div>
        </div>
        <!-- tags container end -->

        <!-- action buttons container -->
        <div class="container_12 action-bar">
            <div class="grid_4"><img src="images/spacer.png" /></div>
           <div id="action-add">
                <input type="text" name="newTag" id="newTag" />
                <input type="button" id="add" value="Add tag" />
            </div>
            <div class="grid_4"><img src="images/spacer.png" /></div>
            <div id="action-edit">
                <input type="text" name="editTag" id="editTag" />
                <input type="button" id="update" value="Update tag" />
            </div>
        <!-- action buttons container end -->
        </div>

        <!-- Real Time list container -->
        <div class="container_12">
            <div class="grid_4"><img src="images/spacer.png" /></div>
            <select id="insertString">
                <option value="0">PHP</option>
                <option value="1">CSS</option>
            </select>
        </div>
        <!-- real time list container end -->

jQuery的：

       //button add click
        $('#add').click(function() {
            //creating a new tag for the tag bar
            var tag = $('#newTag').val();
            var tagHTML=$('<button name= "' + tag + '" class="tag-button">'+ tag + '</button>');
            var qString = "";
            // adding the tag to the bar
            $("#content").append(tagHTML);

            //get last value in the list
            var lastValue = $('#insertString option:last-child').val();
            if (! lastValue) {lastValue = 0;}
            else {lastValue = ++ lastValue; }
            //add new option for the new tag
            $('<option value="' + lastValue + '">' + tag + '</option>').appendTo("#insertString")
        })

        //tag button click
        $("#content").on("click", ".tag-button", function(){
            var name = $(this).attr('name');

            //add the tag name to the editTag textbox
            $('#editTag').val(name);

            $('#insertString option:contains("'+ name + '")').attr('selected', true);
        });

        //update button click
        $('#update').click(function() {
            //get the name of the edited tag in the list
            var tagName = $('#insertString').find(':selected').text();
            var tagNew = $('#editTag').val();

            //change the corresponding buttons name, id and text
            $('#' + tagName).text(tagNew);

            $('#' + tagName).attr({
                name: tagNew,
                id: tagNew
            });

            //change option in the list
            $('#insertString option:selected').text(tagNew);

        })

小提琴：

http://jsfiddle.net/gWnu5/1/

有没有办法让这段代码在我的jQuery版本上运行？

感谢您的帮助

Answer 1

Kevin B回答，真的。这是一个道具与attr问题 - 更新我的代码以适应最新的jQuery核心库，一切都很好。说明链接是：http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-

JQuery对我来说是全新的，这是非常宝贵的信息。传递它。

使用jQuery库1.10.2与1.7.2的小提琴时的问题

1 个答案: