jQuery元素交换

我有3个div，默认情况下只有一个可见，每个div都包含有关产品的信息。下面是3张图片的列表，它们是产品的图片。默认情况下，第一个列表项当然被选中，并且具有

class=“selected”

。单击不同的产品图像时，则

class=“selected”

移动到该列表项，其上方的div变为隐藏，需要显示包含其他产品信息的div

---

我在各地搜索了一个插件，它可以做我想做的事情，它们都受到某种程度的限制，这使我无法做到这一点。

考虑以下代码：

<img id="img1" src="1.jpg" desc="d1" class="selected prodImg" />
<img id="img2" src="2.jpg" desc="d2" class="prodImg" />
<img id="img3" src="3.jpg" desc="d3" class="prodImg"/>

<div id="d1">description 1</div>
<div id="d2" class="hidden">description 2</div>
<div id="d3" class="hidden">description 3</div>

<script>

    $(".prodImg").click(function() {

        if ($(this).hasClass("selected")) return;

        $("#" + $(".selected").attr("desc")).addClass("hidden");
        $(".selected").removeClass("selected");

        $("#" + $(this).attr("desc")).removeClass("hidden");
        $(this).addClass("selected");

    });

</script>

说明1
说明2
说明3
$（“.prodImg”）。单击（函数（）{
if（$（this）.hasClass（“selected”））返回；
$（“#”+$（.selected”）.attr（“desc”）.addClass（“隐藏”）；
$（“.selected”）.removeClass（“selected”）；
$（“#”+$（this.attr（“desc”））.removeClass（“hidden”）；
$（此）.addClass（“选定”）；
});

---

这会让你离得很近。您需要定义图像和div之间的关系。。。因此，我在图像中添加了“desc”属性。图像上的额外“prodImg”类允许您确保只有这些图像被连接到这种类型的交换输入和输出行为中。

考虑以下代码：

<img id="img1" src="1.jpg" desc="d1" class="selected prodImg" />
<img id="img2" src="2.jpg" desc="d2" class="prodImg" />
<img id="img3" src="3.jpg" desc="d3" class="prodImg"/>

<div id="d1">description 1</div>
<div id="d2" class="hidden">description 2</div>
<div id="d3" class="hidden">description 3</div>

<script>

    $(".prodImg").click(function() {

        if ($(this).hasClass("selected")) return;

        $("#" + $(".selected").attr("desc")).addClass("hidden");
        $(".selected").removeClass("selected");

        $("#" + $(this).attr("desc")).removeClass("hidden");
        $(this).addClass("selected");

    });

</script>

说明1
说明2
说明3
$（“.prodImg”）。单击（函数（）{
if（$（this）.hasClass（“selected”））返回；
$（“#”+$（.selected”）.attr（“desc”）.addClass（“隐藏”）；
$（“.selected”）.removeClass（“selected”）；
$（“#”+$（this.attr（“desc”））.removeClass（“hidden”）；
$（此）.addClass（“选定”）；
});

---

这会让你离得很近。您需要定义图像和div之间的关系。。。因此，我在图像中添加了“desc”属性。图像上额外的“prodImg”类允许您确保只有这些图像被连接到这种类型的交换输入和输出行为。

Acordian小部件具有一些类似的功能。如果你把图像放在标题中，你会得到你想要的效果

---

查看了解更多信息。

Acordian小部件具有一些类似的功能。如果你把图像放在标题中，你会得到你想要的效果

<script>

    $(".prodImg").click(function() {

        if ($(this).hasClass("selected")) return;


        $('.prodImg').removeClass('selected');

        $(this).addClass('selected');

        var name = $(this).attr('desc');

        $('.'+name).removeClass();
        $('.'+name).addClass('');       

    });

</script>

查看以了解更多信息。

<script>

    $(".prodImg").click(function() {

        if ($(this).hasClass("selected")) return;


        $('.prodImg').removeClass('selected');

        $(this).addClass('selected');

        var name = $(this).attr('desc');

        $('.'+name).removeClass();
        $('.'+name).addClass('');       

    });

</script>

$（“.prodImg”）。单击（函数（）{
if（$（this）.hasClass（“selected”））返回；
$（'.prodImg'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
var name=$（this.attr（'desc'）；
$（'..+名称）.removeClass（）；
$（'..+名称）.addClass（''）；
});

我希望这能帮助你

$（“.prodImg”）。单击（函数（）{
if（$（this）.hasClass（“selected”））返回；
$（'.prodImg'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
var name=$（this.attr（'desc'）；
$（'..+名称）.removeClass（）；
$（'..+名称）.addClass（''）；
});

---

我希望这能帮助你

我刚刚注意到这个问题的标题中有明显的错误，对不起，各位：）你们能把你们所说的html代码包括进来吗？我刚刚注意到这个问题的标题中有明显的错误，对不起，伙计们：）你们能把你们正在谈论的html代码包括进来吗？你们能不能把它连接起来，这样你们就可以把图片链接到#prod1#prod2等等？链接的div也是将要显示的div？是的，自定义属性很糟糕，如果存在1对1的关系，只需使用index就可以了。你能不能把它连接起来，这样你就可以将图像链接到#prod1#prod2等？链接的div也是将要显示的div？是的，自定义属性很糟糕，如果存在1对1关系，只需使用index。抱歉，由于格式的原因，无法使用index。它必须像下面有三个产品图像的产品窗口一样，并且产品窗口中的产品信息只是更改。抱歉，由于其格式的原因，无法更改。它必须像一个产品窗口，下面有三个产品图片，产品窗口中的产品信息只会改变。