jquery - jquery基于span文本隐藏/显示div

Question

需要一些帮助。我有一个 span 元素，其中文本根据另一个下拉元素的选择而变化：

<span class="drop link" id="title-tagger-20965969" style="cursor:default;text-decoration:underline;">...ng calls or email - 2E1</span>

基本上我想显示与 span 元素文本末尾的文本代码匹配的相应 div ID（如下所示），如上面的示例（2E1）

<div id="changingArea">
<div id="2E1" class="desc">TEXT 2</div>
<div id="2E2" class="desc">TEXT 2</div>
<div id="2E3" class="desc">TEXT 3</div>
</div>

我还希望隐藏所有“changeingArea”div，除非 span 元素包含 div id 作为文本。

提前致谢

Answer 1

我会建议你将iddiv 放在span attribute和隐藏/显示基于id

$('span').click(function(){
    var id = $(this).attr('data-id');
    $('.desc').hide(); //hide all divs
    $('#'+id).show(); //show div based on id
});

小提琴

更新

如果你总是有span这种格式的文本...ng calls or email - 2E1，-那么id你可以像这样

$('span').click(function(){
    var html = $(this).html();
    var split = html.split('-');
    $('.desc').hide(); //hide all divs
    $('#'+$.trim(split[1])).show(); //show div based on id
});

小提琴

Answer 2

尝试这个：

$('span').click(function(){
var txt = $(this).text();
$('.desc').hide(); //hide all divs
var id;
$("div.desc").each(function(){
id=$(this).attr("id");
    if(txt.indexOf(id)>=0){
    $(this).show();
    }
})   
});

在这里提琴