मैंने अपने जैसे अन्य प्रश्नों की कोशिश की है और इस काम को हर तरह से करने की कोशिश की है, यहां तक ​​​​कि इसे एक बुनियादी पुनरावृत्ति तक सरल करके भी। किसी कारण से यह जांच के बारे में कुछ है कि पृष्ठभूमि यूआरएल वही है जो सबकुछ बंद कर देता है। तो बस समझाया गया, मुझे जावास्क्रिप्ट स्थिति को ठीक से बनाने में कोई समस्या है। यह मुद्दा होना चाहिए और मेरी खोज के माध्यम से मुझे नहीं पता कि इसे कैसे रखा जाए। मैंने सिंगल के साथ और बिना दोनों सिरों पर कोशिश की है। मैंने केवल आंतरिक HTML के साथ प्रयास किया है। किसी कारण से यह लगातार झूठा है। किसी भी सहायता की सराहना की जाएगी।

function scrolle() {
  var aa = document.getElementsByClassName("rhuman");
  var ab = document.getElementById("picturea");
  var ac = document.getElementById("counter");
  for (var i = 0; i < aa.length; i++) {
    if (ab.style.backgroundImage == "url('" + aa[i].innerHTML + "')") {
      i++;
      ab.style.backgroundImage = "url('" + aa[i].innerHTML + "')";
      ac.innerHTML = i + 1 + "/" + aa.length;
      return
    }
  }
}
#picturea {
  width: 100px;
  height: 100px;
  background-image: url('https://i.imgur.com/8vXm05P.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
<button onclick="scrolle()">Click here</button>
<div id="counter">1/4</div>
<div id="picturea"></div>
<li class="rhuman">https://i.imgur.com/8vXm05P.png</li>
<li class="rhuman">https://i.imgur.com/ejOe0QT.png</li>
<li class="rhuman">https://i.imgur.com/ur5R5nY.png</li>
<li class="rhuman">https://i.imgur.com/d2TXLTC.png</li>
1
Rage A. Shadey 30 सितंबर 2021, 15:09

2 जवाब

सबसे बढ़िया उत्तर

काउंटर 1 बनाने के लिए जावास्क्रिप्ट का उपयोग करके समस्या को ठीक किया और इसे कुल से अलग किया और फिर इसका उपयोग करके पुनरावृत्तियों की गणना करने में मदद की।

function scrolle() {
var aa = document.getElementsByClassName("rhuman");
var ab = document.getElementById("picturea");
var ac = document.getElementById("counter");
for (var i = 0; i < aa.length; i++) {
if (ac.innerHTML == i) {
if (i != aa.length) {
i++;
ac.innerHTML = i;
ab.style.backgroundImage = "url('" + aa[i - 1].innerHTML + "')";
return
}
}
}
i = 0;
i++;
ac.innerHTML = i;
ab.style.backgroundImage = "url('" + aa[i - 1].innerHTML + "')";
return
}
#picturea {
width: 100px;
height: 100px;
background-position: center;
background-size: contain;
background-image: url('https://i.imgur.com/8vXm05P.png');
background-repeat: no-repeat;
}
<button onclick="scrolle()">Click me</button>
<h1 id="counter">1</h1><h1 id="total">/4</h1>
<div id="picturea"></div>
<li class="rhuman">https://i.imgur.com/8vXm05P.png</li>
<li class="rhuman">https://i.imgur.com/ejOe0QT.png</li>
<li class="rhuman">https://i.imgur.com/ur5R5nY.png</li>
<li class="rhuman">https://i.imgur.com/d2TXLTC.png</li>
0
Rage A. Shadey 1 अक्टूबर 2021, 03:46

आपको गणना मूल्य की आवश्यकता है क्योंकि यह इनलाइन सेट नहीं है

इसके अलावा उद्धरण समान होने चाहिए या आपको सीएसएस स्ट्रिंग से छवि निकालने की आवश्यकता है

जब हम 4 बार क्लिक करते हैं तब भी आपकी गणना में कोई समस्या होती है - मैं लूप काउंटर को लूप के अंदर अपडेट करने की अनुशंसा नहीं करता

function scrolle() {
  var aa = document.getElementsByClassName("rhuman");
  var ab = document.getElementById("picturea");
  var ac = document.getElementById("counter");
  for (var i = 0; i < aa.length; i++) {
   const bgImage = window.getComputedStyle(ab, null).backgroundImage;
    if (bgImage == `url("${aa[i].innerHTML}")`) {
      i++;
      ab.style.backgroundImage = "url('" + aa[i].innerHTML + "')";
      ac.innerHTML = i + 1 + "/" + aa.length;
      return
    }
  }
}
#picturea {
  width: 100px;
  height: 100px;
  background-image: url('https://i.imgur.com/8vXm05P.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
<button onclick="scrolle()">Click here</button>
<div id="counter">1/4</div>
<div id="picturea"></div>
<li class="rhuman">https://i.imgur.com/8vXm05P.png</li>
<li class="rhuman">https://i.imgur.com/ejOe0QT.png</li>
<li class="rhuman">https://i.imgur.com/ur5R5nY.png</li>
<li class="rhuman">https://i.imgur.com/d2TXLTC.png</li>
3
mplungjan 30 सितंबर 2021, 15:21