javascript - 如何在 jQuery 中选择以字符串开头但不以其他字符串结尾的内容？

Question

我是 jQuery 的新手，正在探索它的语法。

我的页面有这样的元素:

<area id="SA" ... />
<area id="AF" ... />
<area id="EU" ... />
<area id="NA" ... />

我正在尝试根据 area 标签的点击事件显示和隐藏 div 部分，这些标签具有匹配的结束 ID，编码如下:

<div id="div_SA" ... />
<div id="div_AF" ... />
<div id="div_EU" ... />
<div id="div_NA" ... />

因此，要显示完全匹配，但隐藏所有 ID 以“div_”开头但不匹配的 div 部分，而不隐藏所有其他 div 在页面上，我试过这个:

    var q = 'div[id="div_' + event.target.id + '"]';
    var r = 'div[id^="div_"],div:not[id$=' + event.target.id + '"]';
    $(q).show();
    $(r).hide();

$(r).hide(); 不工作。我究竟做错了什么？ (我知道我可以分配 CSS 类并使用类名获取它们，但我仍然很好奇如何构建将以这种方式工作的查询。)

Answer 1

让事情尽可能简单，因为您是 jQuery 的新手，您应该养成使用 on() 的习惯。不是 click()，那是过时的，只是指 on 方法。

$('area').on('click', function() {
    var id = "#div_" + $(this).attr('id'),  // comma allows you to make multiple variables
        divs = $('div').hide() // puts all the divs in a variable and automatically hides them all

    // filter through all the divs, and selects the one with the id,
    // of the area that was clicked, and shows it
    divs.filter(id).show();
});​

希望这对您有所帮助。如果没有，请告诉我。