Question

我有一个代码选择一个像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>

Answer 1

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

因此，当您单击代码中的任何 div时，它会获取所有<div>元素的集合，但随后会获取匹配的第一个元素的ID（第一个{ {1}}）然后在稍后调用的<div>函数中使用它。

更改您的代码以访问所点击元素的dialog()属性，而不是像现在这样使用标记选择器，如下所示：

id

Answer 2

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

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

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

Answer 3

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

我还在函数'var'中添加了变量定义（'globals are evil'）， stopPropagation和preventDefault调用

错误地获取DIV ID

3 个答案: