javascript - 具有 id 的多个文本的 1 个按钮切换

Question

你好，

我正在尝试制作一个按钮来切换一些文本，并且我希望文本根据 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”切换时显示

有人有想法吗？

Answer 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;
}

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

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

非常感谢，

问候，

你