时间戳

首页 > 解决方案 > 在 JavaScript 中，如何通过单击对应的图标来隐藏/显示 div

javascript - 在 JavaScript 中，如何通过单击对应的图标来隐藏/显示 div

问题描述

我正在寻找本机 JavaScript 或 jQuery 中的一种方法，div通过单击与其对应的图标来显示 a 。


图标轮播循环：

<?php $GLOBALS['img'] = 0;

if (have_rows('carrousel_icons')): ?>

    <div id="owl-carousel-skills" class="owl-carousel-skills owl-theme col-12 col-sm-10">

        <?php while (have_rows('carrousel_icons')): the_row();
          $icon = get_sub_field('icon');

          $GLOBALS['img']++;
        ?>

        <div id="img_<?= $GLOBALS['img'] ?>" class="owl-carousel-skills-menu-item">
            <img src="<?= $icon['url'] ?>" alt="<?= $icon['alt'] ?>">
        </div>

        <?php endwhile; ?>

    </div>

<?php endif; ?>


ACF 中继器字段块：

<?php
$GLOBALS['div'] = 0;
$counter = 0;

if (have_rows('carrousel_icons')): ?>

    <div class="col-12 col-sm-8 bloc_carousel_icons__txt">

        <?php while (have_rows('carrousel_icons')): the_row();
          $title = get_sub_field('title');
          $txt = get_sub_field('txt');

          $GLOBALS['div']++;
          if ($counter) {
        ?>

        <div id="div_<?= $GLOBALS['div'] ?>" class="inactive" style="display: none;">
            <h3><?= $title ?></h3>
            <?= $txt ?>
        </div>

        <?php continue; } ?>

        <!-- first DIV -->
        <div id="div_<?= $GLOBALS['div'] ?>" class="active" style="display: block;">
            <h3><?= $title ?></h3>
            <?= $txt ?>
        </div>

        <?php $counter++;
        endwhile; ?>

    </div>

<?php endif; ?>


链接以查看屏幕截图

我测试了一些东西，但它只div通过单击任何图标一次显示/隐藏所有内容：

$(function(){
    var $allBlocks =  $(".bloc_carousel_icones__textes > div");
    var id = this.id, itemId = ".bloc_carousel_icones__textes > #div_" + id;
    $(document.body).on("click", "div.owl-carousel-competences-menu-item", function (evt) {
        var id = this.id, itemId = ".bloc_carousel_icones__textes > #div_" + id;
        $allBlocks.not($('.hidden').fadeToggle()).hide();
    });
});

我不知道如何做到这一点，有人有想法吗？

提前致谢 ！

标签： javascriptjquerywordpress

解决方案

你可以这样做：为所有以 开头的click()图像添加一个事件处理程序，获取 this 的编号并切换相应的.idimg_idsubstrdiv

 $(document).ready(function() {
    $("img[id^='img_']").on("click", function() {
       let id = $(this).attr("id").substr(4);
       $("#div_" + id).fadeToggle();
    });
 })

<div>更新：正如评论中所问的，当一个新<div>的被激活时，需要一个解决方案来停用以前的活动。这可以按如下方式完成：

$(document).ready(function() {
  $("img[id^='img_']").on("click", function() {
    let id = $(this).attr("id").substr(4);
    if ($("div[id^='div_']").not($("#div_" + id)).is(":visible")) {
      $("div[id^='div_']").not($("#div_" + id)).fadeToggle();
    }
    $("#div_" + id).fadeToggle();
  });
})
div[id^='div_'] {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img_1" src="https://dummyimage.com/50x50/000000/ffffff&text=1" />
<img id="img_2" src="https://dummyimage.com/50x50/cecece/000000&text=2" />
<div id="div_1">
  div 1
</div>
<div id="div_2">
  div 2
</div>

推荐阅读