Question

您好我在点击图片时使用了slideToggle功能。假设我的页面中有四个图像，如果我点击特定图像，它必须显示与图像相关的特定内容。目前我通过使用下面提到的脚本为每个图像分别声明了。但是我需要在我的页面中包含大约100个具有相同功能的图像我不能重复100次这个功能，这不是一个好习惯。所以任何人都可以帮助我如何在不重复功能的情况下使用单个循环获得此功能。

  <script type="text/javascript">
        $(document).ready(function() {
            $(".img").click(
    function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off').addClass('on');
        }
        $(function() {
            $(".hide-con").slideToggle("800");
        });

    });

            $(".img1").click(
    function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off').addClass('on');
        }
        $(function() {
            $(".hide-con1").slideToggle("800");
        });

    });

            $(".img2").click(
    function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off').addClass('on');
        }
        $(function() {
            $(".hide-con2").slideToggle("800");
        });

    });

            $(".img3").click(
    function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off').addClass('on');
        }
        $(function() {
            $(".hide-con3").slideToggle("800");
        });

    });

            $(".img4").click(
    function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off').addClass('on');
        }
        $(function() {
            $(".hide-con4").slideToggle("800");
        });

    });
        });
</script>

HTML

<div class="img on"></div>
<div class="hide-con">
    <h1>Background</h1>
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p>
</div>  

<div class="img1 on"></div>
<div class="hide-con1">
    <h1>Background</h1>
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p>
</div>  

<div class="img2 on"></div>
<div class="hide-con2">
    <h1>Background</h1>
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p>
</div>  

<div class="img3 on"></div>
<div class="hide-con3">
    <h1>Background</h1>
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p>
</div>  

<div class="img4 on"></div>
<div class="hide-con4">
    <h1>Background</h1>
    <p><strong>Textile-India (T-India)</strong> is an Indian company engaged </p>
</div>

Answer 1

您应该只定义一个类img并使用今天的类作为id：

<img class=img id=img3 src=...>

$(".img").click(function() {
    if ($(this).hasClass('on')) {
        $(this).removeClass('on').addClass('off');
    } else if ($(this).hasClass('off')) {
        $(this).removeClass('off').addClass('on');
    }
    $(".hide-con"+this.id.slice(3)).slideToggle("800"); // extracts the number from the id
});

请注意，我删除了无用的$.ready包装器。

您最好还使用id=hide-con3代替class=hide-con3并使用$("#hide-con"+this.id.slice(3))进行选择。

Answer 2

尝试使用属性选择器和^运算符

$(document).ready(function() {
 $("img[class^='img']").click(function(){
    if ($(this).hasClass('on')) {
        $(this).removeClass('on').addClass('off');
    } else if ($(this).hasClass('off')) {
        $(this).removeClass('off').addClass('on');
    }

     //you don't have to wrap this in ready function again  
     $(".hide-con").slideToggle("800");
  });
});

这将选择所有img，并以img

开头

Answer 3

通过for循环，您可以这样做。

for (var i = 0; i < 100; i++) {
    var n = i == 0 ? '' : i;
    $(".img" + n).click(function () {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on').addClass('off');
        } else if ($(this).hasClass('off')) {
            $(this).removeClass('off').addClass('on');
        }
        (function (n) {
            $(function () {
                $(".hide-con" + n).slideToggle("800");
            });
        })(n);
    });
}

我建议不要采用这种方法，并按照每个人的建议使用适当的基于类的解决方案。基于类的解决方案的唯一挑战是如何处理.hide-con，获取它将取决于它相对于关联的.img的位置。

您可能想知道此部分的内容：

(function (n) {
    $(function () {
        $(".hide-con" + n).slideToggle("800");
    });
})(n);

如果没有此换行功能，.img每次点击都会在slideToggle()上调用.hide-con100，因为n的值将会保留。为了解决它，我们调用一个匿名函数，并在函数内部给它n的值，现在它是它自己的变量，所以递增外部函数不会影响它。

Answer 4

替换

$(function() {
        $(".hide-con3").slideToggle("800");
});

与

$(this).slideToggle("800");

这将确保仅选定的实例切换而不是全部切换，并在所有图像上使用相同的类。

需要循环功能

4 个答案: