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

Question

I am using data-attributes to hold values for product names. When a user clicks on .compProdBlock I want the data-fastName to populate within the fastTitle field.

In my attempt I am using the push and each function. I am not getting any errors, but the data is not populating.

Does anyone see what I am doing wrong? Only the top two choices have data associated with them.

 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

The name of the data-* attribute should be data-fast-name instead of data-fastName .

No need for loop you could set the data of the current clicked element using :

$('#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. Use $('#id').attr('data-fastName') instead of $('#id').data('fastName')

2. If you only want to display the clicked item as title, you don't need to push all the fastName into an array.

 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

There were 2 issues in your code. First you created array and that array would not be printed inside <h3> tag. because it's still an object. you can't print that. and another is after creation on DOM. Data part will be insensitive from case. so if you taking $(this).data('fastName') then it will return undefined. you will need to use $(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

You need to modify the javascript to get the attribute 'data-fastName' of the div:

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