JQuery if div id data attribute equal to 1

Question

I created some "3-D stack div" based on some jquery plugin.

Basically, each div has its own id, and the active div will has an attribute data-position="1" while other unactive div will has data-position="2" or data-position="3".

Now, how can I make an if else statement using jquery where if that div id data-position="1", it will do something specific. For learning purpose, let's just make different div id will show a different custom alert text.

P/S : I found this solution Jquery data attribute value equals, but the thing is it target the same class name which not the same with my case.

EDIT : I add a new jquery where if this div id has this data-class value, show an alert. It works fine, but if I change to if this div id has this data-position value, nothing happen. Why is that?

This is the code where it won't work

jQuery(".next").on('click', function() {
if ($("#discover").data("position") == '1') {
alert("Help Me");
}
});

$( "#slider" ).stack_slider({
  autoPlaySpeed: 6000,
 autoPlay: false,
 dots: false,
 arrows: false,
 drag: false,
  direction: "vertical"
});

jQuery(".next").on('click', function() {
    if ($("#discover").data("class") == '1') {
    alert("Help Me");
    }
});

.dp-wrap {
 margin: 0 auto;
 position: relative;
 perspective: 1000px;
 height: 100%;
}

.dp_item {
 position: absolute;
 transition: transform 1.2s;
 border: 1px solid #707070;
}

#slider {
    position: relative;
}

#dp-slider .dp_item:first-child {
 z-index: 10 !important;
 transform: rotateY(0deg) translateX(0px) !important;
 background: #fff;
}

.dp_item[data-position="2"] {
 z-index: 9;
 transform: rotateY(0deg) translateX(10%) scale(0.9);
}

.dp_item[data-position="3"] {
 z-index: 8;
 transform: rotateY(0deg) translateX(20%) scale(0.8);
}

#dp-slider {
 height: auto;
 min-height: 600px;
}

#dp-slider .dp_item:hover:not(:first-child) {
 cursor: pointer;
}

/* vertical layout */

.vertical #dp-slider .dp_item[data-position="3"] {
 transform: rotateY(0deg) translateY(-3%) scale(0.8);
}

.vertical #dp-slider .dp_item[data-position="2"] {
 transform: rotateY(0deg) translateY(9%) scale(0.9);
}

.vertical #dp-slider .dp_item:first-child {
 transform: rotateY(0deg) translateY(calc(21% - .5px)) scale(1) !important;
}

.vertical #dp-slider .dp_item[data-position="2"] img,
.vertical #dp-slider .dp_item[data-position="3"] img {
    -webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */
    filter: blur(1px);
}

.dp-text {
    padding: 20px;
}

.dp-text h5 {
    color: #404040;
}

.dp-text h5 span {
    border: 2px solid #404040;
    border-radius: 50%;
    padding: 1% 3%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://iceiceicy.com/causeeffect/wp-includes/js/stack-slider.js"></script>

<div id="slider">
  <div class="dp-wrap">
  <p class="next" style="color: #000; cursor: pointer;">NEXT</p>
    <div id="dp-slider">
    
    <div id="discover" class="dp_item" data-class="1" data-position="1">
      <div class="dp-img">
        <img src="https://causeeffect.asia/wp-content/uploads/2018/12/fsbolt.png" />
      </div>
      <div class="dp-text">
        <h5><span>1</span> DISCOVER</h5>
      </div>
     </div>

    <div id="define" class="dp_item" data-class="2" data-position="2">
      <div class="dp-img">
        <img src="https://causeeffect.asia/wp-content/uploads/2018/12/fsbolt.png" />
      </div>
      <div class="dp-text">
        <h5><span>2</span> DEFINE</h5>
      </div>
     </div>

     <div id="develop" class="dp_item" data-class="3" data-position="3">
      <div class="dp-img">
        <img src="https://causeeffect.asia/wp-content/uploads/2018/12/fsbolt.png" />
      </div>
      <div class="dp-text">
        <h5><span>3</span> DEVELOP</h5>
      </div>
     </div>

    </div>
  </div>
</div>

Possible duplicate of [How to get the data-id attribute?](https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute) — Anis R., Jan 29 '19 at 20:11
@Ibu yeah, but I'm not sure I can with onclick though, since the jquery plugin I'm using already use the onclick to change the data-position to "1". — iceiceicy, Jan 29 '19 at 20:22
@Anis R. The link you gave is about getting the data-attribute value — iceiceicy, Jan 29 '19 at 20:24
@NazrinNoorzan true, but you could expand on that, using it to differentiate between the divs (e.g. using if/else statements to know which div you are working on). — Anis R., Jan 29 '19 at 20:28
Possible duplicate of [How to get the data-id attribute?](https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute) — arghtype, Jan 30 '19 at 01:04

score 2 · Answer 1 · answered Jan 29 '19 at 20:25

If I got you right, there are few approaches, but the simplest for you (because you're new to jQuery) is something like that:

for(let i of $('div[data-position]')) {
  const el = $(i);
  if(el.attr('data-position') === '1') {
    console.log(el.text());
  }
}

If you need to get directly to a specific div you can do this as well:

const el = $('div[data-position]=1');

Martin Zeitler · Answer 2 · 2019-01-29T20:42:09.637

2

when only wanting to know the item position, the data attribute might be useless complexity.

because with jQuery it's either .data() or .index():

$(".dp_item").click(function() {

    /* a) reading the data-position */
    if(parseInt($(this).data("position")) == 1) {
        ...
    }

    /* b) using selector .dp_item index position */
    if($(this).index() == 0) {
        ...
    }
});

edited Jan 29 '19 at 20:42

answered Jan 29 '19 at 20:31

Martin Zeitler

1
19
155
216

JQuery if div id data attribute equal to 1

2 Answers2