title: JQuery if div id data attribute equal to 1
body: <p>I created some "3-D stack div" based on some jquery plugin.</p>
  
  <p>Basically, each div has its own id, and the active div will has an attribute <code>data-position="1"</code> while other unactive div will has <code>data-position="2"</code> or <code>data-position="3"</code>.</p>
  
  <p>Now, <strong>how can I make an if else statement using jquery where if that div id <code>data-position="1"</code>, it will do something specific.</strong> For learning purpose, let's just make different div id will show a different custom alert text.</p>
  
  <p>P/S : I found this solution <a href="https://stackoverflow.com/questions/40929100/jquery-data-attribute-value-equals">Jquery data attribute value equals</a>, but the thing is it target the same class name which not the same with my case.</p>
  
  <p>EDIT : <strong>I add a new jquery where <code>if this div id has this data-class value</code>, show an alert. It works fine, but if I change to <code>if this div id has this data-position value</code>, nothing happen. Why is that?</strong></p>
  
  <p>This is the code where it won't work</p>
  
  <pre><code>jQuery(".next").on('click', function() {
  if ($("#discover").data("position") == '1') {
  alert("Help Me");
  }
  });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( "#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");
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://iceiceicy.com/causeeffect/wp-includes/js/stack-slider.js"&gt;&lt;/script&gt;
  
  &lt;div id="slider"&gt;
    &lt;div class="dp-wrap"&gt;
    &lt;p class="next" style="color: #000; cursor: pointer;"&gt;NEXT&lt;/p&gt;
      &lt;div id="dp-slider"&gt;
      
      &lt;div id="discover" class="dp_item" data-class="1" data-position="1"&gt;
        &lt;div class="dp-img"&gt;
          &lt;img src="https://causeeffect.asia/wp-content/uploads/2018/12/fsbolt.png" /&gt;
        &lt;/div&gt;
        &lt;div class="dp-text"&gt;
          &lt;h5&gt;&lt;span&gt;1&lt;/span&gt; DISCOVER&lt;/h5&gt;
        &lt;/div&gt;
       &lt;/div&gt;
  
      &lt;div id="define" class="dp_item" data-class="2" data-position="2"&gt;
        &lt;div class="dp-img"&gt;
          &lt;img src="https://causeeffect.asia/wp-content/uploads/2018/12/fsbolt.png" /&gt;
        &lt;/div&gt;
        &lt;div class="dp-text"&gt;
          &lt;h5&gt;&lt;span&gt;2&lt;/span&gt; DEFINE&lt;/h5&gt;
        &lt;/div&gt;
       &lt;/div&gt;
  
       &lt;div id="develop" class="dp_item" data-class="3" data-position="3"&gt;
        &lt;div class="dp-img"&gt;
          &lt;img src="https://causeeffect.asia/wp-content/uploads/2018/12/fsbolt.png" /&gt;
        &lt;/div&gt;
        &lt;div class="dp-text"&gt;
          &lt;h5&gt;&lt;span&gt;3&lt;/span&gt; DEVELOP&lt;/h5&gt;
        &lt;/div&gt;
       &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>