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>

除非span元素包含div id作为文本，否则我还希望隐藏所有'changingArea'div。

提前致谢

Answer 1

我建议您在id span中放置div的attribute并根据id

隐藏/显示

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

FIDDLE

<强>更新

如果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 });将是{{1}}，那么

{{1}}

FIDDLE

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();
    }
})   
});

Fiddle Here

jquery隐藏/显示基于跨度文本的div

2 个答案: