如何在带有链接元素的 JavaScript/jQuery 中显示或隐藏特定内容？

How do I show or hide specific content in JavaScript/jQuery with linked elements?

提问人：Mister M 提问时间：11/9/2023 更新时间：11/9/2023 访问量：57

问：

我对 JavaScript/jQuery 有非常具体的需求，但我找不到完美的解决方案，总有一个我无法满足的标准。

以下是情况摘要： 我有 3 个标题，每个标题都有自己的 id 和一个共同的类。 我还有 3 个内容，每个内容都有自己的 id 和一个公共类。

在代码级别，它如下所示：

<h3 id="title1" class"triggers">Title 1</h3> 
<h3 id="title2" class"triggers">Title 2</h3> 
<h3 id="title3" class"triggers">Title 3</h3>

<p id="content1" class="myContents">Content 1</p> 
<p id="content2" class="myContents">Content 2</p> 
<p id="content3" class="myContents">Content 3</p>

我的约束如下：

  • 默认情况下，所有内容都处于隐藏状态
  • 当我点击一个标题时，会显示相关内容（例如：我点击标题1，显示内容1），所选标题会改变颜色
  • 当我单击另一个标题时，先前选择的标题将恢复其原始颜色，并且其内容消失。另一方面，我刚刚点击的标题改变了它的颜色，它的特定内容出现了（例如：我点击了标题2，标题1恢复到原来的颜色，content1消失了，而title2改变了颜色，content2出现了）。一次只能显示一个内容。
  • 当我第二次单击当前选定的标题时，它会恢复到原来的颜色，并且其内容会消失（但是如果我第三次单击，它会再次出现，基本上会出现一个镜头，一个镜头消失，所以点击两个）。
  • 标题 ID 会自动附加到内容 ID（因为在我的示例中，只有 3 个标题和 3 个内容，但很可能有 20、30 等）。

对于普通开发人员来说，外观上是“基本”的情况，除了我不能同时满足所有这些条件之外，总有时候它会坚持......宽容一点，我还是这个行业的初学者

因此，如果您能够帮助我解决这个障碍，我将不胜感激！感谢您抽出宝贵时间阅读我:)

到目前为止，我已经设法满足了我对内容显示的一些要求，但我还没有设法同时满足所有这些要求。

javascript html jquery css 切换

评论

1赞 Roko C. Buljan 11/9/2023
你忘了粘贴你遇到问题的 JS。阅读：如何提问，然后使用最小的可重现示例进行编辑。
0赞 Roko C. Buljan 11/9/2023
另外，属性在哪里？=class"triggers"

答：

0赞 Mark Schultheiss 11/9/2023 #1

由于您有多个要求，我只会切换一些数据属性值并匹配 CSS;您可以放置任何与目标匹配的选择器，然后切换它。你甚至可以像我为五行所展示的那样拥有“特殊”的 css - 甚至以这种方式使用绿色/黄色/红色等的红绿灯效果。

我添加了几个具有不同选择器的目标，以便您可以看到它很灵活。

请注意，您甚至可以拥有 TWO 并将它们包装在一个 div 中，以便兄弟姐妹匹配。触发器和内容可以按任意顺序排列，只要选择器匹配即可。

function handleTriggerClick(event) {
  const trig = this;
  const tval = trig.dataset.clicker;
  //reset all triggers
  this.parentNode.querySelectorAll(".triggers").forEach(sib => sib.dataset.clicker = "base");
  // set this trigger
  trig.dataset.clicker = tval !== "red" ? "red" : "base";
  const targS = trig.dataset.related;
  // get the target from the selector in the attribute
  const tC = document.querySelector(targS);
  //reset the targets siblings (and it) 
  tC.parentNode.querySelectorAll(".myContents").forEach(sib => sib.dataset.trigger = "hide");
  // set to show
  tC.dataset.trigger = "first";
}

document.querySelectorAll(".triggers[data-related]").forEach(trig => {
  trig.addEventListener("click", handleTriggerClick, false);
  trig.dataset.clicker = "base"
});
.triggers[data-clicker="base"] {
  color: blue;
}

.triggers[data-clicker="red"] {
  color: red;
}

.myContents[data-related] {
  display: none;
}

.myContents[data-trigger="first"] {
  display: block;
  color: red;
}

.myContents[data-trigger="first"][data-related="five"] {
  display: block;
  color: green;
  font-weight: bold;
  width: 15em;
  text-align:center;
  border: solid 1px #00ff0080;
}

.myContents[data-trigger="hide"] {
  display: hide;
}
<h3 id="title1" class="triggers" data-related="#content1">Title 1</h3>
<h3 id="title2" class="triggers" data-related="#content2">Title 2</h3>
<h3 id="title3" class="triggers" data-related="#content3">Title 3</h3>
<h3 class="triggers four" data-related=".myContents.four">Title 4</h3>
<h3 class="triggers" data-related=".myContents[data-related='five']">I am number 5</h3>

<p id="content1" class="myContents" data-related="#title1">Content 1</p>
<p id="content2" class="myContents" data-related="#title2">Content 2</p>
<p id="content3" class="myContents" data-related="#title3">Content 3</p>
<p class="myContents four" data-related=".triggers.four">Content 4</p>
<p class="myContents" data-related="five">Five is alive!</p>

评论

0赞 Mister M 11/9/2023
也感谢您的回答，但与之前的答案一样，并非所有条件都得到满足。当您再次单击所选标题时，它会变回蓝色（其原始颜色），但附加到它的内容仍会显示。标题必须恢复为蓝色，并且其内容在再次单击时必须消失。
0赞 Mister M 11/9/2023
更重要的是，正如我在问题中所说，理想情况下，我希望能够仅使用“id”和“class”属性（我正在使用插件来解决我的问题，除了这两个属性之外，我无法添加任何属性）。我正在继续寻找自己做这件事的方法，谢谢你的想法。因此，感谢您的建议以及您花时间回答我，无论如何:)
0赞 Mark Schultheiss 11/10/2023
“不显示”可以通过在点击时检查目标的当前值来解决;我可以稍后更新，但目前没有时间。这可以通过类来完成，但代码会更多一些，您也可以仅从代码中添加数据属性，而不是像我在这里那样的“起始 html”。
0赞 Arti Mourya 11/9/2023 #2 

<!DOCTYPE html>
<html>
    
    <head>
       
        <title>Java Script Function and Event Example</title>
        <style>
            
            #content1,#content2,#content3
            {
                visibility: hidden;
            }
           
            .highlight
            {
                color: red;
            }
        </style>

            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript">
        
            $(document).ready(function() {

                
                $("#title1").click(function(e) {
                    $('*').removeClass('highlight');
                    $(this).addClass('highlight');

                    $("#demo").text($("#content1").text());
                });

                $("#title2").click(function() {
                    $('*').removeClass('highlight');
                    $(this).addClass('highlight');
                   
                    $("#demo").text($("#content2").text());
                });

                $("#title3").click(function() {
                    $('*').removeClass('highlight');
                    $(this).addClass('highlight');
                   
                    $("#demo").text($("#content3").text());
                });
    
            });  
        </script>
    </head>
    
    <body>
<h3 id="title1" class"triggers">Title 1</h3> 
<h3 id="title2" class"triggers">Title 2</h3> 
<h3 id="title3" class"triggers">Title 3</h3>

<p id="content1" class="myContents">Content 1</p>
<p id="content2" class="myContents">Content 2</p> 
<p id="content3" class="myContents">Content 3</p>
<p id="demo"></p>

    </body>
</html>

评论

0赞 Mister M 11/9/2023
感谢您的回复，但与我的个人测试一样，并非所有条件都得到满足。事实上，当您再次单击所选标题时，附加到它的内容仍会显示，并且标题仍保持红色。标题必须改回黑色，并且当您再次单击它时，其内容必须消失。更重要的是，正如我在问题中所说，我希望有一个带有分解代码块的函数，该代码块可以在不复制代码的情况下为不同的元素提供所需的行为。
0赞 Mister M 11/9/2023
在您的解决方案中，如果您只有 3 或 4 个可点击的标题，那就没问题了。如果我们有 30 或 40 个，则该功能将非常/太大并且难以维护。但是，感谢您的提议以及您花时间回复:)

上一个：为动态生成的按钮创建“切换”函数

下一个：Bootstrap 轮播问题，Bootstrap 版本 5