使用数据属性和单击功能将数据值推送到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

1. 使用$('#id').attr('data-fastName')代替$('#id').data('fastName')

2. 如果只想将单击的项目显示为标题，则无需将所有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 3

您的代码中有2个问题。 首先，您创建了数组，该数组不会打印在<h3>标记内。 因为它仍然是一个对象。 你不能打印出来。 另一个是在DOM上创建之后。 数据部分将不区分大小写。 因此，如果您使用$(this).data('fastName')则它将返回未定义。 您将需要使用$(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> 

Answer 4

您需要修改javascript以获取div的属性“ data-fastName”：

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