使用数据属性和点击功能将数据值推送到 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-* attribute 的名称应该是 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>

Answer 2

您需要修改 javascript 以获得 div 的属性 'data-fastName':

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

Answer 3

使用$('#id').attr('data-fastName')代替$('#id').data('fastName')
如果只想将点击的项目显示为标题，则不需要将所有的fastName推入数组。

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

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

您的代码中有 2 个问题。首先，您创建了数组，该数组不会打印在 <h3> 标记内。因为它仍然是一个对象。你不能打印那个。另一个是在 DOM 创建之后。数据部分将不区分大小写。所以如果你使用 $(this).data('fastName') 那么它将 return 未定义。您将需要使用 $(this).data('fastname')

var fastShowName = '';
 $('.compProdBlock').click(function () {
  fastShowName = '';
  $('.compProdBlock').each(function () {
   fastShowName = fastShowName + $(this).data('fastname');
  });
    
    console.log(fastShowName);
  $('#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" data-fastName="Standard  32b 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>
   </div>
  </section>

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

Using data-attribute and click function to push data value to div

javascript

each

jquery

click

custom-data-attribute