如何将单击的元素指向特定的元素以显示其描述
如何将单击的元素指向特定的元素以显示其描述
提问于 2016-02-25 11:20:37
我们有带扣子的街区。每个按钮将其[data-description]指向一个特定的块，该块将[data-description]显示为其目标content-block。现在我手动设置了if函数，比如：
if (targetElement == 'text-pack-1')
if (targetElement == 'text-pack-2')问题是如何不手动编写if条件，这样每个按钮块都知道它的目标在哪里？
function modalBox() {
$('.list-labels').each(function(i) {
i++;
$(this).addClass('pack-' + i);
});
$('.content-block').each(function(i) {
i++;
$(this).addClass('text-pack-' + i);
});
$('.pack').on('click', function() {
var targetElement = $(this).data('target')
if (targetElement == 'text-pack-1') {
var descrip = $(this).data('description')
$('.text-pack-1').text(descrip)
}
if (targetElement == 'text-pack-2') {
var descrip = $(this).data('description')
$('.text-pack-2').text(descrip)
}
})
}
modalBox()* {
box-sizing: border-box
}
body {
margin: 100px;
background: #39A2AE;
font-family: 'PT Sans', sans-serif;
}
ul {
margin-bottom: 20px;
}
.pack {
color: #fff;
cursor: pointer;
}
li {
margin-bottom: 5px;
}
.content-block {
padding: 20px;
border: 2px solid #fff;
margin: 30px 0;
color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-labels">
<li><div class="pack" data-target="text-pack-1" data-description="Button-1">Button-1</a></li>
<li><div class="pack" data-target="text-pack-1" data-description="Button-2">Button-2</a></li>
<li><div class="pack" data-target="text-pack-1" data-description="Button-3">Button-3</a></li>
<li><div class="pack" data-target="text-pack-1" data-description="Button-4">Button-4</a></li>
</ul>
<ul class="list-labels">
<li><div class="pack" data-target="text-pack-2" data-description="Button-5">Button-5</a></li>
<li><div class="pack" data-target="text-pack-2" data-description="Button-6">Button-6</a></li>
<li><div class="pack" data-target="text-pack-2" data-description="Button-7">Button-7</a></li>
<li><div class="pack" data-target="text-pack-2" data-description="Button-8">Button-8</a></li>
</ul>
<div class="content-block">
</div>
<div class="content-block">
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-25 11:25:36
如果通过索引将.list-label元素与.content-block关联起来，您可以在这里极大地简化逻辑。试试这个：
$('.list-labels div').click(function() {
var $div = $(this);
var index = $div.closest('.list-labels').index('.list-labels');
$('.content-block').eq(index).text($div.data('description'));
});* {
box-sizing: border-box
}
body {
margin: 100px;
background: #39A2AE;
font-family: 'PT Sans', sans-serif;
}
ul {
margin-bottom: 20px;
}
.pack {
color: #fff;
cursor: pointer;
}
li {
margin-bottom: 5px;
}
.content-block {
padding: 20px;
border: 2px solid #fff;
margin: 30px 0;
color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-labels">
<li><div class="pack" data-description="Button-1">Button-1</div></li>
<li><div class="pack" data-description="Button-2">Button-2</div></li>
<li><div class="pack" data-description="Button-3">Button-3</div></li>
<li><div class="pack" data-description="Button-4">Button-4</div></li>
</ul>
<ul class="list-labels">
<li><div class="pack" data-description="Button-5">Button-5</div></li>
<li><div class="pack" data-description="Button-6">Button-6</div></li>
<li><div class="pack" data-description="Button-7">Button-7</div></li>
<li><div class="pack" data-description="Button-8">Button-8</div></li>
</ul>
<div class="content-block"></div>
<div class="content-block"></div>
从示例中可以看到，第一个.list-labels设置第一个.content-block，第二个设置第二个，依此类推。代码可以在不修改的情况下处理任意数量的元素，并且省去了在元素上创建丑陋的惟一类，必须有一个严格的data-target属性集，最重要的是if语句。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35625828
复制相关文章
相似问题
腾讯云开发者
