在不同的按钮中显示相同的ID。冲突

Question

我从外部html文件加载内容。 page1.html和page2.html。除了图片和文字，一切都是一样的。但与关闭按钮有冲突。它即将关闭page1.html 我这里是我的代码

function close_box() { 
    dividid = $(this).parents('div').attr('id'); 
    divid = $('#' + dividid).parents('div').attr('id'); 
    dividofid = $('#' + divid).parents('div').attr('id'); 
    alert(dividofid); 
    return false; 
} 

，这是HTML

<div id="page1id"> 
    <div id="danis"> 
     <div id="close_box"> <a onclick='close_box.call(this);'>page1 close</a> 
     </div> 
    </div> 
</div> 
<div id="page2id"> 
    <div id="danik"> 
     <div id="close_box"> <a onclick='close_box.call(this);'>page2 close</a> 
     </div> 
    </div> 
</div> 


http://jsfiddle.net/LULrE/3/ 

Answer 1

这是您纠正代码：

function close_box() { 
    var divid = $(this).parent().parent().parent().attr('id'); 
    alert(divid); 
    return false; 
} 

您的代码出现问题，dividid得到close_box，但是当您在选择器中使用该ID时，它将选取第一个ID为close_box的div，这是与page1对应的div。

Fiddle

Answer 2

你id个页面必须是唯一的。如果因为CSS原因在同一页面上需要多个id s，并且页面上的值相同，请使用class属性。

对于JS的目的，如果您在页面上查找特定的id，则只返回第一个。在你的情况下，$('#' + dividid);解析为$('#close_box');，它只返回它找到的第一个元素。

我会接近你的问题是这样的：

HTML：

<div id="page1id" class="closeable"> 
    <div id="danis"> 
     <div id="close_box"> <a onclick='close_box.call(this);'>page1 close</a> 
     </div> 
    </div> 
</div> 
<div id="page2id" class="closeable"> 
    <div id="danik"> 
     <div id="close_box"> <a onclick='close_box.call(this);'>page2 close</a> 
     </div> 
    </div> 
</div> 

JS：

function close_box() { 
    var page_level_div = $(this).closest('.closeable'); 
    page_level_div.hide() 
    return false; 
} 

编辑：

最后但并非最不重要的，我建议你不要在HTML中使用onclick处理程序。特别是因为你已经在使用jQuery，你可以很容易地重写代码是这样的：

HTML：

<div id="page1id" class="closeable"> 
    <div id="danis"> 
     <div class="close_box"> <a href="">page1 close</a> 
     </div> 
    </div> 
</div> 
<div id="page2id" class="closeable"> 
    <div id="danik"> 
     <div class="close_box"> <a href="">page2 close</a> 
     </div> 
    </div> 
</div> 

JS：

$(document).ready(function() { 
    $(".close_box").click(function() { 
     $(this).closest('.closeable').hide(); 
    }); 
});