Javascript 尝试附加元素jQuery

我试图在用户从我的dropdownlist中选择一个选项后创建一个元素。不幸的是，我没有得到我想要的结果。我取得的成果如下：

正如您所看到的，在用户所做的每个选定选项之后，“删除”链接都会增加。另外，创建的

div

和锚元素之间没有空格。我想我需要一个for循环来修复递增链接

remove

。但我真的不知道怎么做。我尝试了以下方法：

$（“#选择”）.change（函数（）{
var值=$（“#选择选项：已选择”）.val（）；
var theDiv=$（“.is”+值）；
//theDiv.slideDown（）.removeClass（“隐藏”）；
$（“#选择选项：已选择”）.attr（'disabled'，'disabled'）；
变量$div=$（“”{
id:“foo”，
班级：“a”，
文本：值
});
//$div.click（函数（）{/*…*/}）；
$（“.selectContainer”）.append（$div）；
var newLink=$（“-->

将

newLink

附加到所有匹配的标签上。在您的案例中，每个标签都有class

a

（即护士、患者）

但是您要做的是将

remove

仅附加到具有class

a

的最后一个标记上

然后：

---

将为您工作。

重要错误是您将删除链接附加到所有

div.a

元素

只需将它附加到新创建的一个（您有一个对它的引用）

而不是

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

使用

---

此外，如果您多次访问所使用的元素，则应缓存对这些元素的引用。如果可用，则最好使用本机属性

那么这个

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;

最后,

• 您可以在创建时将移除处理程序绑定到元素
• 您还需要设置

  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(); });
};

$（“#theSelect”）.change（function（）{
var option=this.options[this.selectedIndex]，
value=option.value；
var theDiv=$（“.is”+值）；
//theDiv.slideDown（）.removeClass（“隐藏”）；
option.disabled=true；
var$div=$（“”，{id:“foo”，class:“a”，text:value}）；
//$div.click（函数（）{/*…*/}）；
$（“.selectContainer”）.append（$div）；
var newLink=$（“
您好，谢谢您的回答。但老实说，我不明白您的第一点“您可以在创建时将删除处理程序绑定到元素…”您的意思是在我创建div元素的同时我也创建了锚元素吗？如果是，您或其他人可以展示一下这是如何做到的吗？我也在谷歌上搜索了rel属性。我它的rel属性仅用于更好的SEO？或者还有更多我可能不知道的内容吗？我确实理解您的最后两点：）@superkytoz我忘记了to。“您可以在创建时将移除处理程序绑定到元素。我的意思是，您尝试将移除处理程序添加到链接的方式不起作用（在运行
$（“div a.remove”）时元素不存在。单击（..）
代码）。因此，通过将
click:remove
作为
var newLink=$（“”，{..}）的选项之一传递给
code，您可以设置单击链接时要使用的处理程序。在我的代码中，我将删除代码放在一个函数中，并将其传递给链接。
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;

$("#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(); });
};