Question

我基于一些jquery插件创建了一些“ 3-D stack div”。

基本上，每个div都有自己的ID，活动div将具有属性data-position="1"，而其他非活动div将具有data-position="2"或data-position="3"。

现在，我如何使用jquery生成if else语句，如果该div ID为data-position="1"，它将执行特定的操作。出于学习目的，让我们将另一个div id设为显示其他自定义提醒文本。

P / S：我找到了此解决方案Jquery data attribute value equals，但事实是它针对的是相同的类名，与我的情况不同。

EDIT：我添加了一个新的jquery，其中if this div id has this data-class value显示警报。它工作正常，但是如果我更改为if this div id has this data-position value，则什么也不会发生。为什么会这样？

这是无法使用的代码

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>

Answer 1

如果我说对了，方法很少，但是最简单的方法（因为您是jQuery的新手）是这样的：

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

如果您需要直接进入特定的div，也可以执行以下操作：

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

Answer 2

当只想知道商品位置时，data属性可能没有用。

因为使用jQuery，所以它是.data()或.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) {
        ...
    }
});

jQuery div ID数据属性是否等于1

2 个答案: