javascript - 使用数据属性和点击功能将数据值推送到 div

Question

我正在使用数据属性来保存产品名称的值。当用户单击 .compProdBlock 时，我希望 data-fastName 填充到 fastTitle 字段中。

在我的尝试中，我使用了 push 和 each 函数。我没有收到任何错误，但数据未填充。

有没有人看到我做错了什么？只有前两个选项有与之关联的数据。

var fastShowName = [];
$('.compProdBlock').click(function() {
  $('.compProdBlock').each(function() {
    fastShowName.push($($(this).data('fastName')));
  });
  $('#fastTitle').html(fastShowName);
});

#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%;
}

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

Answer 1

data-* 属性 的名称应该是data-fast-name 而不是data-fastName。

无需循环，您可以使用以下方式设置当前点击元素的数据:

$('#fastTitle').text( $(this).data('fast-name') );

$(function() {
  $('.compProdBlock').click(function() {
    $('#fastTitle').text($(this).data('fast-name'));
  });

  $('.compProdBlock:first').click();
});

#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%;
}

<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-fast-name="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-fast-name="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>