1

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>

Improve this question

4 Answers 4

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thanks for the help! Is there a way to get the first .compProdBlock data to show on page load?
I will also be inserting an as a data-attribute. Would this still work with the method you are using or would I have to use the push function then? I would have mentioned this in my question, but I figured the push function would be the answer either way.
You're welcome, sure you could call $('.compProdBlock:first').click() at the start of ready function
so you have just to change data-fastImg to data-fast-img and use the same approach as we do for the fast-name.
Glad I could help brother, HAPPY CODING.
|
1

  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>

Improve this answer

Comments

1

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>

Improve this answer

Comments

-1

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);
    });
Improve this answer

1 Comment

Answers should be more that just "Change your code to this". They should clearly explain what the problem was and how the solution addresses it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.