使用data-attribute与click函数向div推送数据值的问题排查

嘿，你的代码问题主要出在逻辑方向错了——你本来想获取「当前点击的那个.compProdBlock」的data-fastName，但却在点击事件里遍历了所有同类型元素，把所有值都塞到数组里，这肯定达不到预期效果。另外还有两个小细节错误，我给你拆解一下：

错误点梳理 #

• 遍历所有元素是多余的：点击事件的回调函数里，this本来就指向当前被点击的.compProdBlock元素，不需要再用each遍历全部。
• 错误包裹jQuery对象：$(this).data('fastName')已经直接返回字符串值了，你却用$()把它包成了jQuery对象，导致最后赋值的是对象而不是文本内容。
• 数组会无限累加：每次点击都会往fastShowName数组里push新值，多次点击后数组会越来越长，显示内容会重复混乱。

修正后的代码 #

JavaScript核心部分 #

$('.compProdBlock').click(function() {
  // 获取当前点击元素的data-fastName值
  var currentFastName = $(this).data('fastName');
  // 判断是否有值，有就填充，没有就清空（可选逻辑）
  $('#fastTitle').html(currentFastName || '');
});

完整可运行代码（仅替换JS部分，HTML/CSS保持不变） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="compSec2" class="sec">
  <div id="compSec2Block1">
    <h3 class="dG" id="fastTitle"></h3>
  </div>
  <div id="compSec2Block2">
    <div id="compSec2Block2inner">
      <div class="compProdBlock" data-fastName="Standard Fastener" data-fastImg="">
        <img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
        <div class="pTitleWrap">
          <div class="boxTitleWrap">
            <h2 class="boxTitle25">Standard Fastener</h2>
          </div>
        </div>
      </div>
      <div class="compProdBlock" data-fastName="Universal Fastener">
        <img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
      </div>
      <div class="compProdBlock">
        <img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
      </div>
      <div class="compProdBlock">
        <img src="https://s.shld.net/is/image/Sears/s_102316_Tools_Holiday_VisualNav_2-qm-$cq_width_250$" alt="Standard Fastener">
      </div>
    </div>
  </div>
</section>

<style>
#compSec2Block1, #compSec2Block2 {
  display: inline-block;
  vertical-align: top;
  height: 80vh;
}
#compSec2Block1 {
  width: 40%;
}
#compSec2Block2 {
  width: 60%;
}
#compSec2Block2inner {
  width: 100%;
  height: 100%;
}
.compProdBlock {
  width: 50%;
  height: 50%;
  display: inline-block;
  position: relative;
  border-right: 2px solid #000;
  box-sizing: border-box;
  cursor: pointer;
}
.compProdBlock img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pTitleWrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.boxTitleWrap {
  background: rgba(0, 0, 0, .6);
  width: 100%;
}
.boxTitle25 {
  color: #FFF;
  font-size: 2rem;
  font-family: 'Muli', sans-serif;
  font-weight: 400;
  line-height: 1.4em;
  padding: 10px 0px 10px 20px;
  text-transform: uppercase;
  width: 85%;
}
</style>

<script>
$('.compProdBlock').click(function() {
  var currentFastName = $(this).data('fastName');
  $('#fastTitle').html(currentFastName || '');
});
</script>

额外优化建议 #

如果想给没有data-fastName的元素添加友好提示，可以把代码改成：

$('.compProdBlock').click(function() {
  var currentFastName = $(this).data('fastName');
  $('#fastTitle').html(currentFastName ? currentFastName : '暂无产品名称');
});

这样点击前两个带数据的块时，会把对应名称填充到#fastTitle里；点击后两个无数据的块时，会显示提示文本，体验更友好。

内容的提问来源于stack exchange，提问作者Paul