在Oracle中单击，切换div的CSS类

Question

动态区域呈现HTML代码，如下所示：

<div class="col-sm-6 col-md-4 mb-30">
                    <div id="'||l_cnt||'" class="package_box" onClick=selectText('||i.PKG_ID||')>
                        <a id="'||i.PKG_ID||'" href="#" class="text_wht" onclick=setDetails('||i.PKG_ID||'); onClick=selectText('||i.PKG_ID||')
                            data-pkgid="'||i.PKG_ID||'" data-price="'||i.OFFERED_PRICE||'" data-pkgname="'||i.PKG_ARB_NAME||'">
                            <img src="'||i.TEMPLATE_IMG||'" class="img-center" onClick=changeClass()>
                        </a>
                        <div class="clearfix pad-15">
                            <h3 class="mt-0"><strong class="pull-left font_arial text-center">'||I.OFFERED_PRICE||'<br><span class="text_12 text_blck">SAR</span></strong>'||i.PKG_ARB_NAME||'</h3>
                            <div class="clear pad-5"></div>
                            <button type="button" class="btn btn-success btn-sm btn-rounded pull-left"><span class="font_arial">عدد الوجبات : '||I.NO_OF_MEALS||'</span> </button>
                            <a href="#" class="btn btn-success btn-sm btn-rounded btn-border" data-toggle="modal" data-target=".product-img'||i.PKG_ID||'">التفاصيل</a>
                        </div>
                    </div>
                </div>

当用户单击div中的img时，我希望将class="package_box"切换到class="package_box active"。

我在下面使用JS函数，但它不起作用：

function changeClass() {
      var div = document.getElementsByClassName("package_box"); 
     document.getElementById("div").className = "package_box active";   
}

当用户单击图像时，如何切换使用此函数的类？

Answer 1

你可以这样做：

function changeClass() {
  // Listen for the click event on the image.
  this.addEventListener('click', function(event) {
    /* Get the target's (img) closest relative up the DOM tree that matches
     * the class ".package_box" and on click, toggle the "active" class
    */
    event.target.closest('.package_box').classList.toggle('active');
  });
}

另外，您的onClick可能应该是小写和引号，例如onclick="changeClass()"。

测试片段：

​

function changeClass() {
  this.addEventListener('click', function(event) {
    event.target.closest('.package_box').classList.toggle('active');
  });
}

.active {
  background: red;
}

<div class="package_box">
  <div>
    <img src="https://i.picsum.photos/id/0/543/543.jpg?hmac=vkQshP4GPU8JNGicpcjZANqwAY8T7FfIY-WU5khNLiQ" class="img-center" onclick="changeClass()">
  </div>

</div>

​

编辑:它可能无法在您的网站上工作，因为我意识到您正在用自己的单击事件将图像包装在<a>锚标记中--因此鼠标单击不会到达图像。

您可以在changeClass()函数中添加setDetails()，因为根据代码片段，图像将始终包装在a标记中。并且不需要将changeClass()添加到图像的onclick中。你可以把它去掉。

​

function changeClass(img) {
  // Get all the package_box elements
  let package = document.getElementsByClassName('package_box');

  // convert to an array and remove the active class from all of them.
  [...package].forEach(function(elem) {
    elem.classList.remove('active');
  });

  // Add the active class to the one we clicked.
  img.closest('.package_box').classList.add('active');

}

function setDetails() {
  //set details do stuff...
  // Use an event listener to find out which a tag we've clicked and pass the target.
  this.addEventListener('click', changeClass(event.target), false);
}

.active {
  background: red;
}

a {
  display: block;
}

<div class="package_box">
  <a href="#" onclick="setDetails()">
    <img src="https://picsum.photos/200/200" class="img-center">
  </a>

</div>

<div class="package_box">
  <a href="#" onclick="setDetails()">
    <img src="https://picsum.photos/200/200" class="img-center">
  </a>

</div>

<div class="package_box">
  <a href="#" onclick="setDetails()">
    <img src="https://picsum.photos/200/200" class="img-center">
  </a>

</div>

​

Answer 2

尝试按以下方式更改您的功能

如果只想添加一个新类而不删除现有类

function changeClass() {
      $(".package_box").addClass("active");   
}