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

您页面上的id必须是唯一的。如果出于CSS原因，您需要在同一页面上具有相同值的多个id，请使用class属性。

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

我会像这样处理你的问题：

HTML：

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

JS：

<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>

编辑：

最后但并非最不重要的是，我建议您不要在HTML中使用onclick处理程序。特别是因为您已经在使用jQuery，所以您可以轻松地重写代码：

HTML：

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

JS：

{{1}}

Answer 2

以下是您更正后的代码：

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

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

2 个答案: