Javascript jquery在div中显示/隐藏内容而不进行硬编码

我有3个div，里面有内容（图像）。当您单击其中一个时，其中的内容变为可见，而其他两个的内容变为隐藏。我已经设法用jquery代码实现了这一点（您可以在下面检查），但糟糕的是它是硬编码的，还有其他方法可以做到吗

附言：“如果你想看的话，这就是网站本身

---------------------------------------------------------代码-----------------------------------------------------

<!-- Hide/Show DIV1 content-->
<script>
// Hide content in div with id#mox when cliked on div with id#content
  $("#mox2").on("click", function () {
  $("#content1").hide();
  });
  $("#mox3").on("click", function () {
  $("#content1").hide();
  });
// Show content in div with id#mox when cliked on div with id#content
  $("#mox1").on("click", function () {
  $("#content1").show();
  });
</script>

<!-- Hide/Show DIV2 content-->
<script>
  $("#content2").hide();
// Hide content in div with id#mox when cliked on div with id#content
  $("#mox1").on("click", function () {
  $("#content2").hide();
  });
  $("#mox3").on("click", function () {
  $("#content2").hide();
  });
// Show content in div with id#mox when cliked on div with id#content
  $("#mox2").on("click", function () {
  $("#content2").show();
  });
</script>

<!-- Hide/Show DIV3 content-->
<script>
$("#content3").hide();
// Hide content in div with id#mox when cliked on div with id#content
 $("#mox2").on("click", function () {
 $("#content3").hide();
  });
 $("#mox1").on("click", function () {
 $("#content3").hide();
 });
  // Show content in div with id#mox when cliked on div with id#content
 $("#mox3").on("click", function () {
 $("#content3").show();
 });

//在id为内容的div上剪切时，隐藏id为mox的div中的内容
$（“#mox2”）。在（“单击”上，函数（）{
$（“#content1”）.hide（）；
});
$（“#mox3”）。在（“单击”，函数（）{
$（“#content1”）.hide（）；
});
//在id为内容的div上单击时，在id为mox的div中显示内容
$（“#mox1”）。在（“单击”上，函数（）{
$（“#content1”）.show（）；
});
$（“#content2”）.hide（）；
//在id为内容的div上剪切时，隐藏id为mox的div中的内容
$（“#mox1”）。在（“单击”上，函数（）{
$（“#content2”）.hide（）；
});
$（“#mox3”）。在（“单击”，函数（）{
$（“#content2”）.hide（）；
});
//在id为内容的div上单击时，在id为mox的div中显示内容
$（“#mox2”）。在（“单击”上，函数（）{
$（“#content2”）.show（）；
});
$（“#content3”）.hide（）；
//在id为内容的div上剪切时，隐藏id为mox的div中的内容
$（“#mox2”）。在（“单击”上，函数（）{
$（“#content3”）.hide（）；
});
$（“#mox1”）。在（“单击”上，函数（）{
$（“#content3”）.hide（）；
});
//在id为内容的div上单击时，在id为mox的div中显示内容
$（“#mox3”）。在（“单击”，函数（）{
$（“#content3”）.show（）；
});

---

鉴于这三个都有一个公共类

mox

，如果您向每个内容div添加一个公共类

content

，则可以执行以下操作：

$(".mox").click(function() {
    $(this).children(".content").show();
    $(".mox").not(this).children(".content").hide();
}

说明：只要单击具有

mox

类的任何元素，就会调用该函数

此

选择器允许您选择单击的类的特定实例，

children（）

选择任何子元素，当我们将选择器作为

children（）

的参数时，它选择与该选择器匹配的所有子元素。第二行的工作原理类似，添加了

not（this）

，因此第二行读取隐藏与

content

类匹配的所有元素，并且是类为

mox

的任何元素的子元素，但这一行除外

编辑：如果出于某种原因您不想为所有内容div分配公共类，则以下函数将按原样工作：

$(".mox").click(function() {
    $(this).children("[id^=content]").show();
    $(".mox").not(this).children("[id^=content]").hide();
}

---

在这里，我使用了带有选择器的

attributeStartsWith.
如果您的内容在
mox
之外，您可以为每个元素应用相同的类，并添加一个数据，以便仅显示您想要的内容


$（.mox”）。在（“单击”上，函数（）{
变量内容=$（“.content”）
content.hide（）；
content.eq（$（this.attr（“数据内容”）-1.show（）；
});

展示一个
显示两个
第三场
试试这段代码


$（'.mox'）。在（'click'，function（）上{
$（'.image_list'）.hide（）；
var$index=$（'.mox'）.index（本）；
$（'.image_list'）.eq（$index.show（）；
});


O
V
E
R
V
I
E
W


A
L
B
U
M
S


A
B
O
U
T

有更好的方法可以做到这一点
您可以简单地使用以下代码

$('.content').on('click', '.img-heading', function(){
    $(this).parent('.content').siblings('.content').removeClass('active');
    $(this).parent('.content').addClass('active');
})

根据您的代码：


函数myCustomHide（contentId、moxsId）{
forEach（函数（元素，索引）{
索引！==0？$（“#”+元素）.hide（）：null；
forEach（函数（moxElem，moxIndex）{
如果（索引！==moxIndex）{
$（“#”+moxElem）。在（“单击”，函数（）上）{
$（“#”+元素）.hide（）；
});
}
});
$（“#”+moxsIds[index]）。在（“单击”，函数（）上{
$（“#”+元素）.show（）；
});
});
}
var contentsIds=[“content1”、“content2”、“content3”]；
var moxsIds=[“mox1”、“mox2”、“mox3”]；
myCustomHide（contentsIds、moxsid）

概述
相册
关于
这个答案很好，我已经在我的代码中实现了你的方法，一切正常，但有一件事很烦人。由于某些原因，在页面加载时，我看到div2和div3的内容持续了1/10秒左右，屏幕抖动得非常厉害。我只在Chrome上注意到了这一点，Firefox做得很好。可能是什么？注：我已经用代码更新了网站，所以你可以看看这个bug。@r.hrytskiv你只在页面加载时隐藏div2和div3，这可能会导致类似的问题。由于页面上的脚本总是在页面加载时隐藏div2和div3，因此您应该删除脚本的这部分（
$（“#content2”）.hide（）；$（“#content3”）.hide（）；
），而是将
style=“display:none；”
添加到div2和div3中，这样它们就不会在加载时显示。发现这非常有用。谢谢@Abinthaha