0

嗨，我在单击图像时使用了 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>
4

4 回答 4

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))来选择它。

于 2013-04-04T11:57:57.153 回答
0

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

$(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");
  });
});

这选择所有以类开头的imgimg

于 2013-04-04T12:01:18.980 回答
0

这就是你将如何使用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，在函数内部它现在是它自己的变量，所以增加外部变量不会影响它。

于 2013-04-04T12:02:10.103 回答
0

代替

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

和

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

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

于 2013-04-04T12:02:59.460 回答