javascript - 尝试附加一个元素 jQuery

Question

我试图在用户从下拉列表中选择一个选项后创建一个元素。不幸的是我没有得到我很高兴想要的结果。我取得的结果如下:

正如您所看到的，在用户选择每个选项后，链接“删除”都会增加。此外，创建的 div 和 anchor 元素之间没有空格。我想我需要一个 for 循环来修复递增链接remove。但我实在不知道怎么办。我尝试过以下方法:

$("#theSelect").change(function() {
  var value = $("#theSelect option:selected").val();
  var theDiv = $(".is" + value);

  //theDiv.slideDown().removeClass("hidden");
  $("#theSelect option:selected").attr('disabled', 'disabled');

  var $div = $("<div>", {
    id: "foo",
    class: "a",
    text: value
  });
  //$div.click(function(){ /* ... */ });
  $(".selectContainer").append($div);

  var newLink = $("<a />", {
    id: "id5",
    name: "link",
    href: "#",
    text: "remove"
  });

  $(".a").append(newLink);

});

$("div a.remove").click(function() {
  var value = $(this).attr('rel');
  var theDiv = $(".is" + value);

  $("#theSelect option[value=" + value + "]").removeAttr('disabled');

  $(this).parent().slideUp(function() {
    $(this).addClass("hidden");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectContainer">
  <select id="theSelect">
    <option value="">- Select -</option>
    <option value="Patient">Patient</option>
    <option value="Physician">Physician</option>
    <option value="Nurse">Nurse</option>
  </select>
</div>
<!-- <div class="hidden isPatient">Patient <a href="#" class="remove" rel="Patient">remove</a></div> -->
<!-- <div class="hidden isPhysician">Physician <a href="#" class="remove" rel="Physician">remove</a></div> -->
<!-- <div class="hidden isNurse">Nurse <a href="#" class="remove" rel="Nurse">remove</a></div> -->

Answer 1

重要的错误是您将删除链接附加到所有 div.a 元素

只需将其附加到新创建的(您有对它的引用)

而不是

$(".a").append(newLink);    

使用

$new.append(newLink);    

---

此外，如果您多次访问所使用的元素，则应该缓存对这些元素的引用。如果可用，也首选使用 native 属性

所以这个

var value = $("#theSelect option:selected").val();
var theDiv = $(".is" + value);

//theDiv.slideDown().removeClass("hidden");
$("#theSelect option:selected").attr('disabled','disabled');

可以变成

var option = this.options[this.selectedIndex],
    value = option.value,
    theDiv = $(".is" + value);

option.disabled = true;

最后，

• 您可以在创建时将删除处理程序绑定(bind)到元素。
• 您还需要设置 rel 属性
• 您需要删除该元素，而不仅仅是隐藏它，因为每次更改 select 元素时都会创建新元素
• 您需要删除 id5，因为您创建了多个具有相同 ID 的链接，但该链接无效

所有更改一起

$("#theSelect").change(function(){          
    var option = this.options[this.selectedIndex],
        value = option.value;

    var theDiv = $(".is" + value);

    //theDiv.slideDown().removeClass("hidden");
    option.disabled = true;

    var $div = $("<div>", {id: "foo", class: "a", text: value });
    //$div.click(function(){ /* ... */ });
    $(".selectContainer").append($div);

    var newLink = $("<a />", {
        name : "link",
        href : "#",
        text : "remove",
        rel : value,
        click: remove
    });

    $div.append(newLink);    

});

function remove() { 
    var value = $(this).attr('rel');
    var theDiv = $(".is" + value);

    $("#theSelect option[value=" + value + "]").removeAttr('disabled');

    $(this).parent().slideUp(function() { $(this).remove(); });
};

演示地址:http://jsfiddle.net/gaby/pzq8hqjw/7/