错误地获取DIV ID

getting DIV ID erroneously

本文关键字：ID DIV 获取 错误      更新时间：2023-09-26

我有一个代码，可以选择类似div的页面元素，并通过颜色选择器插件更改其颜色。。然而，当我点击一个div时，它只读取第一个div的ID。。并且只更改同一个div。即使我单击另一个div，它也会一直读取正文中的第一个div。对如何处理有什么建议吗？这是代码。：D

 $(document).ready(function() {
var elementTag;
var divID;
    $("#modalPicker").dialog({
        show: "blind",
        hide: "explode",
        height: 299,
        width: 247,
        modal: true,
        autoOpen: false,
        open: function(){
        $('#picker').farbtastic(function(color) {
            $("#"+divID).css("background-color", color);
        });
        }
    });
    $("BODY").click(function(event){
        elementTag = event.target.nodeName;
        alert(elementTag);
        if($(""+elementTag).attr('id') != undefined)
        {
            divID = $(""+elementTag).attr('id');
            //divID = this.id;
            alert(divID);
            $(this).removeClass();
            $("#modalPicker").dialog("open");
        }
        else if($(""+elementTag).attr('id') == undefined)
        {
            alert("no ID for this element!");
        }
    });

});
</script>
 <body style="border:#00CCFF; border-bottom-style:dashed">

<div id="HEADER" style="size: 500px">HEADER</div>
<div id="BODY" style="height:700 px; width:1024; border: 20 px">BODY</div>
<div id="FOOTER" style="height: 400 px; width: 500 px; border-bottom-color:#000000">FOOTER</div>
<span> SIMON </span>
<li> here
    <ul>SIMON</ul>
</li>   
<div id="modalPicker">
    <div id="picker"></div>
</div>

</body>

您总是在html中获得第一个div。element.target.nodeName将返回DIV（如果您单击DIV），然后您只得到第一个DIV的Jquery对象。

我认为您需要改变将jquery DIV创建为的方式

var div = $(event.target)
var divID = div.attr("id");

您将一个标记名称（div、input等）作为选择器传递给jQuery函数，它将返回一个包含所有具有该标记的元素的集合，在本例中，是页面上的所有<div>元素。调用返回值（而不是设置值）的函数（如val()或attr()）只作用于返回的集合中的第一个元素。

因此，当您点击代码中的anydiv时，它会得到一组所有<div>元素，但随后会得到匹配的第一个元素（第一个<div>）的ID，然后在稍后调用的dialog()函数中使用。

更改代码以访问单击的元素的id属性，而不是像现在这样使用标记选择器：

$("BODY").click(function(event){
    var $id = $(event.target).attr('id');
    if($id != undefined)
    {
        divID = $id;
        alert(divID);
        $(this).removeClass();
        $("#modalPicker").dialog("open");
    }
    else
    {
        alert("no ID for this element!");
    }
});

Anthony的解释很好，另一个选项是直接从event.target对象获取id。http://jsfiddle.net/gaboesquivel/XDUM2/

我还在你的函数"var"中添加了变量定义（"全局是邪恶的"），stopPropagation和preventDefault调用

相关文章：