javascript - 在不同的按钮中显示相同的 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

您id在页面上的 s 必须是唯一的。如果id出于 CSS 原因需要在同一页面上具有相同值的页面上的多个 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();
    });
});

Answer 2

这是您更正的代码：

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

您的代码的问题是divididgets close_box，但是当您在选择器中使用该 id 时，它会选择第一个 idclose_box为 的 div，即对应于 page1 的 div。

小提琴