Question

我想访问id =＆＃34; p5pg5QXlX-an-obj-1＆＃34;到id =＆＃34; p5pg5QXlX-an-obj-31＆＃34; id在类中并应用动画播放状态属性。

这是我的代码：

<div id="p5pg5QXlX-an-anim"><ol>

<li id="p5pg5QXlX-an-scene-0" >
<div class="p5pg5QXlX-an-stage">
<div id="p5pg5QXlX-an-obj-1"><div><img  height="416" width="320"     src="assets/overlay1.png"></div></div>
<div id="p5pg5QXlX-an-obj-2"><div><img  height="416" width="320"  src="assets/stars-and-chand.png"></div></div>
<div id="p5pg5QXlX-an-obj-3"><div><img  height="75" width="320"  src="assets/stars-support.png"></div></div>
<div id="p5pg5QXlX-an-obj-4"><div><img  height="416" width="320"  src="assets/page1-bottom-design.png"></div></div>
<div id="p5pg5QXlX-an-obj-5"><div><img  height="416" width="320"  src="assets/page1-minars.png"></div></div>
<div id="p5pg5QXlX-an-obj-6"><div><img  height="416" width="320"  src="assets/ramadan.png"></div></div>
<div id="p5pg5QXlX-an-obj-7"><div><img  height="416" width="320"  src="assets/mubarak.png"></div></div>
<div id="p5pg5QXlX-an-obj-8"><div><img  height="416" width="320"  src="assets/page1hw.png"></div></div>
<div id="p5pg5QXlX-an-obj-9"><div><img  height="416" width="320"  src="assets/panel.png"></div></div>
<div id="p5pg5QXlX-an-obj-10"></div>
<div id="p5pg5QXlX-an-obj-11"></div>
<div id="p5pg5QXlX-an-obj-12"><div><img  height="89" width="89"  src="assets/rplay.png"></div></div>
</div>
</li>

<li id="p5pg5QXlX-an-scene-7" >
<div class="p5pg5QXlX-an-stage">
<div id="p5pg5QXlX-an-obj-13"><div><img  height="416" width="320"  src="assets/overlay2.png"></div></div>
<div id="p5pg5QXlX-an-obj-14"><span>Receiver Name</span></div>
<div id="p5pg5QXlX-an-obj-15"><span>Wishing you a wonderful Birthday and a prosperous year ahead!</span></div>
<div id="p5pg5QXlX-an-obj-16"><div><img  height="119" width="111"  src="assets/page2-logo.png"></div></div>
<div id="p5pg5QXlX-an-obj-17"><div><img  height="416" width="320"  src="assets/page2hw.png"></div></div>
<div id="p5pg5QXlX-an-obj-18"><div><img  height="416" width="320"  src="assets/panel.png"></div></div>
</div>
</li>

<li id="p5pg5QXlX-an-scene-4" >
<div class="p5pg5QXlX-an-stage">
<div id="p5pg5QXlX-an-obj-19"><div><img  height="416" width="320"  src="assets/overlay3.png"></div></div>
<div id="p5pg5QXlX-an-obj-20"><div><img  height="350" width="639"  src="assets/3-3.jpg"></div></div>
<div id="p5pg5QXlX-an-obj-21"><div><img  height="350" width="639"  src="assets/3-1.jpg"></div></div>
<div id="p5pg5QXlX-an-obj-22"><div><img  height="350" width="639"  src="assets/3-2.jpg"></div></div>
<div id="p5pg5QXlX-an-obj-23"><div><img  height="416" width="320"  src="assets/page2hw.png"></div></div>
<div id="p5pg5QXlX-an-obj-24"><div><img  height="416" width="320"  src="assets/panel.png"></div></div>
<div id="p5pg5QXlX-an-obj-25"><div><img  height="40" width="320"  src="assets/strip.png"></div></div>
<div id="p5pg5QXlX-an-obj-26"><div><img  height="40" width="54"  src="assets/map.png"></div></div>
<div id="p5pg5QXlX-an-obj-27"><div><img  height="40" width="54"  src="assets/phone.png"></div></div>
<div id="p5pg5QXlX-an-obj-28"><div><img  height="40" width="54"  src="assets/url.png"></div></div>
<div id="p5pg5QXlX-an-obj-29"><div><img  height="40" width="54"  src="assets/email.png"></div></div>
<div id="p5pg5QXlX-an-obj-30"><div><img  height="39" width="43"  src="assets/giftcard.png"></div></div>
<div id="p5pg5QXlX-an-obj-31"><div><img  height="40" width="50"  src="assets/social.png"></div></div>
</div>
</li>

</ol>
</div>

我想将动画状态属性应用于来自id =＆＃34; p5pg5QXlX-an-obj-1＆＃34;的所有id。到id =＆＃34; p5pg5QXlX-an-obj-31＆＃34;那么请告诉我如何访问班级内的id？

我做到了这一点：

var id = document.querySelectorAll("#p5pg5QXlX-an-anim > ol> li > div > div");
        [].forEach.call(id, function(el, i) {
            el.style.WebkitAnimationPlayState = "paused";
            el.style.animationPlayState = "paused";
        });

但它只针对第一个li元素而不是所有li元素运行所以请帮助我＆amp;

因为我想要一个通用的代码，所以请帮助我这个＆amp;尝试在javascript中提供sol

Answer 1

您可以使用以下选项更具体地使用选择器：

.case {
  ..
  transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  ..
}

.case:hover, .case:hover .case_content {
    display: block;
}

.case_content {
    ..
    display: none;
    ..
}

这将选择以您指定的值开头的任何标记。在你的情况下，我相信你会想尝试：

tag[attribute^="value"]

你的所有id都以该字符串开头。我希望这会有所帮助。

如何修改所选id的所有子li和div的元素？

1 个答案: