Question

我想在特定ID下获取一个类。下面将有多个html代码实例。每个实例唯一的唯一事物是最前img和myModal的ID。因此，下一次出现将是id = 2和myModal成为myModal2的地方。

HTML

  <img class="hover-shadow cursor card-img-top" src="images/dmc.png" id="1" onclick="openModal(this.id);currentSlide(1)" alt="">
                    <div id="myModal1" class="modal">
                        <span class="close cursor" onclick="closeModal()">&times;</span>
                        <div class="modal-content">
                          <!-- main_slide -->
                          <div class="mySlides">
                            <div class="numbertext">1 / 4</div>
                            <img src="images/dmc.png" style="width:100%">
                          </div>

                          <div class="mySlides">
                            <div class="numbertext">2 / 4</div>
                            <img src="images/port.jpg" style="width:100%">
                          </div>

                          <div class="mySlides">
                            <div class="numbertext">3 / 4</div>
                            <img src="images/dmc.png" style="width:100%">
                          </div>

                          <div class="mySlides">
                            <div class="numbertext">4 / 4</div>
                            <img src="images/port.jpg" style="width:100%">
                          </div>

                          <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                          <a class="next" onclick="plusSlides(1)">&#10095;</a>

                          <div class="caption-container">
                            <p class="caption"></p>
                          </div>
                        </div>
                          <!-- Thumbnail image slide preview -->
                          <div class="column">
                            <img class="demo cursor" src="images/dmc.png" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
                          </div>
                          <div class="column">
                            <img class="demo cursor" src="images/port.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
                          </div>
                          <div class="column">
                            <img class="demo cursor" src="images/dmc.png" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
                          </div>
                          <div class="column">
                            <img class="demo cursor" src="images/port.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
                          </div>


                    </div>

JS文件

var thismodal = "myModal";
var clicked_id,trueModalId;
function openModal(clicked_id) {
    trueModalId = thismodal + clicked_id;
    document.getElementById(trueModalId).style.display = "block";
    var thisSlides = "mySlides" + clicked_id;
    alert(thisSlides);
}

function closeModal() {
    document.getElementById(trueModalId).style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    // alert(mySlides);
    var slides = document.getElementById(trueModalId).document.getElementsByClassName("mySlides");//display big
    var dots = document.getElementById(trueModalId).document.getElementsByClassName("demo");//thumbnail underneath display big
    var captionText = document.getElementById(trueModalId).document.getElementById("caption");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
    captionText.innerHTML = dots[slideIndex-1].alt;
}

当我分别将slides，dots和captionText分别分配给document.getElementById(trueModalId).document.getElementsByClassName("mySlides");，document.getElementById(trueModalId).document.getElementsByClassName("demo");和document.getElementById(trueModalId).document.getElementById("caption");时，它不起作用。我该怎么办？

编辑

我使用document.getElementById(trueModalId).document.getElementsByClassName("mySlides");而不是使用document.querySelectorAll('#' + trueModalId + ' >.modal-content > .mySlides');，并且可以使用。

但是对于var captionText = document.querySelectorAll('#' + trueModalId + ' >.modal-content > .caption-container > .caption');，它不起作用。

Answer 1

不确定问题。真的不清楚您要什么吗？但是，如果您要检查特定元素下的特定类，则有一个答案：

if($('#your_id').find('.your_class').length) {
// do stuff
}

根据特定ID获取课程

1 个答案: