Question

我们有按钮块。每个按钮都会将其[data-description]定位到特定的区块，该区块会显示[data-description]到其定位的content-block。现在我手动设置if功能，如：

if (targetElement == 'text-pack-1')
if (targetElement == 'text-pack-2')

问题是如果条件不能手写，所以每个按钮块知道它的目标位置？

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果您通过索引将.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')); });相关联，则可以大量简化逻辑。试试这个：

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

.list-labels

＆＃13;

从示例中可以看出，第一个.content-block设置了第一个data-target，第二个设置了第二个{，1}，依此类推。该代码适用于任何数量的元素而无需修改，节省了必须在元素上创建丑陋的唯一类，必须具有严格的if属性集，最重要的是{{1}}语句。 / p>

如何将单击的元素定位到特定元素以显示其描述

1 个答案: