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

Question

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

我尝试使用push和each功能。我没有收到任何错误，但数据没有填充。

有谁看到我做错了什么？只有前两个选项才有与之相关的数据。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

Sub newNew() Dim lastRow As Integer lastRow = Sheets("Sheet6").Cells(Sheets("Sheet6").Rows.Count, 1).End(xlUp).Row Dim arr As Variant arr = Array() For Rownum = 1 To lastRow Dim str As String str = Sheets("Sheet6").Cells(Rownum, 1) arr = Split(str, " ") numElementsInArray = UBound(arr) - LBound(arr) + 1 'some options Dim secondToLast As Integer secondToLast = 2 Dim thirdToLast As Integer thirdToLast = 3 Dim fourthToLast As Integer fourthToLast = 4 Sheets("Sheet7").Cells(Rownum, 1) = arr(numElementsInArray - secondToLast) Erase arr Next Rownum End Sub 的名称应为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%;
}

Answer 2

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

2. 如果您只想将所点击的项目显示为标题，则无需将所有fastName推送到数组中。

＆＃13;
＆＃13;
var fastShowName = [];
	$('.compProdBlock').click(function () {
		$('#fastTitle').html($(this).attr('data-fastName'));
	});
＆＃13;
#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%;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您的代码中有2个问题。首先，您创建了数组，并且该数组不会在<h3>标记内打印。因为它仍然是一个对象。你不能打印出来。另一个是在DOM上创建之后。数据部分对案例不敏感。所以如果你拿$(this).data('fastName')那么它将返回undefined。您需要使用$(this).data('fastname')

＆＃13;

＆＃13;

var fastShowName = '';
	$('.compProdBlock').click(function () {
  fastShowName = '';
		$('.compProdBlock').each(function () {
			fastShowName = fastShowName + $(this).data('fastname');
		});
    
    console.log(fastShowName);
		$('#fastTitle').html(fastShowName);
	});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

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