使用數據屬性和單擊功能將數據值推送到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);
    });