1 个按钮切换多个带有 id 的文本答案

【问题标题】：1 button toggle for multiple texts with id1 个按钮切换多个带有 id 的文本
【发布时间】：2017-12-07 12:05:36
【问题描述】：

你好，

我正在尝试制作一个按钮来切换某些文本，并且我希望文本更改与 id 相关。

所以1个按钮来打开/关闭文本，而文本根据id改变

有可能吗？

编辑：

我一方面有一个幻灯片，我可以使用它更改显示的图像，另一方面有一个关于图像当前图像的文本。我还想在图像更改的同时更改文本。

我还有一个用于打开/关闭文本的按钮，我不希望在网站第一次加载时显示文本。

文本和图像如何同时变化，但只有在按下切换按钮时才会显示文本？

对于我拥有的 HTML：

  <img class="mySlides" src="img/bouc.jpg" style="width:100%">
  <p class="img-name">BOUC 1</p>
  <div class="txt-div" id="1">
    <p>Text 1</p></p>
  </div>

  <img class="mySlides" src="img/bouc.jpg" style="width:100%">
  <p class="img-name">BOUC 2</p>
  <div class="txt-div" id="2">
    <p>Text 2</p></p>
  </div>

  <button class="chat-button w3-display-left" onclick="plusDivs(-1)"></button>
  <button class="chat-button w3-display-right" onclick="plusDivs(1)"></button>  
  <button class="chat-button-txt">Text</button>

对于我拥有的 CSS：

.txt-div{
...
display: none;
...
}

对于我拥有的 JS：

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("img-count");
    var txt = document.getElementsByClassName("txt-div");
    var noms = document.getElementsByClassName("img-name");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
     dots[i].style.display = "none";
     noms[i].style.display = "none";
  }

  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].style.display = "block";
  noms[slideIndex-1].style.display = "block";

    $(document).ready(function(){
        $(".chat-button-txt").click(function(){
        $(".txt-div").toggle();
        });
    });
}

我不知道如何使文本与“x”、“dots”和“noms”同时更改，而仅在通过“chat-button-txt”切换时显示

有人有想法吗？

【问题讨论】：

问题不清楚

标签： javascript jquery html css toggle

【解决方案1】：

我找到了一个解决方案，通过添加另一个类来使用切换按钮“屏蔽”文本，并且文本可以随着图像的变化而变化，但这不是一个“更好的方法”吗？

我的实际代码：

HTML

<div class="cover-txt"></div>
  <img class="mySlides" src="img/bouc.jpg" style="width:100%">
  <p class="img-name">BOUC 1</p>
  <div class="txt-div" id="1">
    <p>Text 1</p>
  </div>

  <img class="mySlides" src="img/bouc.jpg" style="width:100%">
  <p class="img-name">BOUC 2</p>
  <div class="txt-div" id="2">
    <p>Text 2</p>
  </div>

<button class="chat-button w3-display-left" onclick="plusDivs(-1)"></button>
  <button class="chat-button w3-display-right" onclick="plusDivs(1)"></button>  
  <button class="chat-button-txt">Text</button>

CSS

.cover-txt{
position: absolute;
background-color: white;
display: block;
top:10%;
left:104%;
width: 22vw;
height: 25vw;
z-index: 999;
}

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}
function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("img-count");
    var txt = document.getElementsByClassName("txt-div");
    var noms = document.getElementsByClassName("img-name");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
     dots[i].style.display = "none";
     noms[i].style.display = "none";
     txt[i].style.display = "none";
  }

  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].style.display = "block";
  noms[slideIndex-1].style.display = "block";
  txt[slideIndex-1].style.display = "block";

    $(document).ready(function(){
        $(".chat-button-txt").click(function(){
        $(".cover-txt").toggle();
        });
    });
}

我认为这不是最好的解决方案，但我为我工作。如果有人有更好的东西，我会很高兴阅读它。

非常感谢，

问候，

【讨论】：