如何選擇以字符串開頭但以jQuery中不同字符串結尾的內容？

Question

我是jQuery的新手，探索一下它的語法。

我的頁面有這樣的內容：

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

我想根據點擊事件關閉area標籤，該標籤具有匹配的結束ID的，編碼這樣的顯示和隱藏div部分：

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

因此，要顯示完全匹配，但要隱藏所有以「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

編輯：

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

而且，你的代碼可以通過將其更改爲簡化在您的文章中提到的語法修正見下文，

var q = '#div_' + this.id; 
    var r = 'div[id^="div_"]:not("#div_' + this.id + '")'; 

    $(r).hide(); 
    $(q).show(); 

DEMO

請檢查下面的替代解決方案，

爲了評估Q，我會簡單地使用

var q = $('#div_' + this.id); 

而對於R，

var r = $('div[id^="div_"]').not(q); 

r.hide(); 
q.show(); 

DEMO

Answer 2

not css僞選擇器不使用括號括起括號。在最後一個括號之前，您還有一個無與倫比的引號。

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

$(q).show(); 
$(r).hide(); 

Answer 3

//start by selecing all of the DIV elements that have an ID attribute that starts with "div_", 
//and hide all of them, 
//then filter that list down to only the element(s) that have an ID that ends with the id of the `event.target` element 
//and show that/those element(s) 
$('div[id^="div_"]').hide().filter('#div_' + event.target.id).show(); 

Answer 4

如何：

$('area').click(function() { 
    var areaID = $(this).attr('id'); 
    $('div[id^="div_"]').hide(); 
    $('div[id^="div_' + areaID + '"]').show(); 
});​ 

Answer 5

簡短

// cache divs, no need to search them again 
var divs=$('div[id^="div_"]'); 
$('area').click(function(){ 
     divs.hide().eq($(this).index()).show();     
}); 

Answer 6

讓事情容易和簡單越好，因爲你是在新的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(); 
});​ 

希望這可以幫助你現在。如果沒有，請讓我知道。