CODEWITHSUNDEEP
javascriptjqueryclickeachcustom-data-attribute
Paul
Paul

Reputation: 3368

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

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>

Upvotes: 1

Views: 502

Answers (4)

Rush.2707
Rush.2707

Reputation: 683

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>

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 1

mbadeveloper
mbadeveloper

Reputation: 1270

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);
    });

Upvotes: -1

Eliellel
Eliellel

Reputation: 1446

  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>

Upvotes: 1

Related Questions