Переключить текст между несколькими кнопками - PullRequest
Новая
       10

Переключить текст между несколькими кнопками

1 голос
/ 16 апреля 2019

Я хотел бы иметь две кнопки, которые в основном категории. Давайте назовем их категории A и категории B. Они отображаются слева и справа. Ниже я хотел бы отобразить некоторый текст, который зависит от выбранной категории (то есть нажатой кнопки), так что категория A показывает текст A, а категория B показывает текст B.

Это если для html. Я работаю на домашней странице WordPress.

Мне удалось установить одну кнопку, которая переключает текст (в основном кнопка 1 = Категория A). Но мне не удалось вставить вторую кнопку (в основном кнопка 2 = Категория B). Есть идеи? Высоко ценится! 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<p>Click the button to swap the text of the DIV element:</p>

<p><button onclick="myFunction()">Click Me</button></p>

<div id="myDIV">Hello</div>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.innerHTML === "Hello") {
    x.innerHTML = "Swapped text!";
  } else {
    x.innerHTML = "Hello";
  }
}
</script>

</body>
</html>

Я ожидаю иметь 2 кнопки, которые отображают 2 категории, текст должен переключаться в зависимости от того, какая кнопка была нажата.

Ответы [ 4 ]

1 голос
/ 16 апреля 2019

Может поместить описание в атрибут, затем получить значение атрибута по клику и изменить html описания.Вот это jsFiddle 

<div>
  <button class="js-button default-button" data-description="Category A's Description" onclick="myFunction(this)">
    Category A
  </button>
  <button class="js-button default-button" data-description="Category B's Description" onclick="myFunction(this)">
    Category B
  </button>
</div>

<div id="js-description" class="description">
</div>

<script>
function myFunction(elem) {
  var x = document.getElementById("js-description");
  var description = elem.getAttribute('data-description');
  x.innerHTML = description;
  
  var button = document.getElementsByClassName('js-button');
  
  for (var i = 0; i < button.length; i++) {
    button[i].classList.remove('active-button');
  }
  
  elem.classList.add('active-button');
}
</script>

<style>
  .default-button{
    font-size:16px;
    border-radius: 4px;
    padding:7px 12px;
  }
  .active-button{
    background:blue;
    color:#fff;
  }
  .description{
    margin-top:20px;
  }
</style>
0 голосов
/ 16 апреля 2019

Мне не очень нравятся все эти решения, потому что все написано из JS, но содержимое, вероятно, исходит из базы данных. Итак, вот мое решение: 

// Native JS version
// Working Fiddle : https://jsfiddle.net/d34cbtw7/
var togglers = document.querySelectorAll('[data-toggle="tab"]');

for (var i = 0; i < togglers.length; i++) {
    togglers[i].addEventListener('click', function() {
        var tabs = document.querySelectorAll('.tab');
        for(var j = 0; j < tabs.length; j++) {
            tabs[j].classList.remove('active');
        }
        var $target = document.querySelector(this.getAttribute('data-target'));
        $target.classList.add('active');
    });
}

// jQuery version
$('body').on('click', '[data-toggle="tab"]', function(e) {
  e.preventDefault();
  // Select our target
  var $target = $($(this).data('target'));
  // Hide all tabs
  $('.tab-contents .tab').removeClass('active');
  // Show only $target tab
  $target.addClass('active');
});
.tab-contents .tab {
  display: none;
}
.tab-contents .tab.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-toggle="tab" data-target="#cat-A-content">
Cat A
</button>
<button data-toggle="tab" data-target="#cat-B-content">
Cat B
</button>

<div class="tab-contents">
  <div class="tab active" id="cat-A-content">
    My category A contents
  </div>
  <div class="tab" id="cat-B-content">
    My category B contents
  </div>
</div>

Мне также не очень нравится атрибут "onclick" в HTML ...

0 голосов
/ 16 апреля 2019

Есть несколько способов добиться этого, но самый простой способ объяснить это вам будет следующим: 

function myFunction(myEle) {
  var x = document.getElementById("myDIV");
  x.innerHTML = "This is category " + myEle.value;
}
<p>Click the button to swap the text of the DIV element:</p>

<p>
  <button onclick="myFunction(this)" value="a">
    Category A
  </button>
  <button onclick="myFunction(this)" value="b">
    Category B
  </button>
</p>

<div id="myDIV">Hello</div>

JSFiddle

Не нужно слишком усложнять вещи.

Во-первых, вы хотели бы отправить элемент, по которому щелкнули, вызывающего (который в данном случае также будет элементом, по которому щелкнули, элемент <button>).Вы можете использовать JavaScript this для этой цели.

В вашей функции вы можете назвать параметр в скобках, поэтому в моем примере выше: function myFunction() содержит параметр с именем myEle, поэтому он будет выглядеть следующим образом:function myFunction(myEle).Как только функция будет запущена, параметр с именем myEle будет установлен на элемент, по которому щелкнули (или JavaScript this).Вы можете просто получить доступ к любому из его атрибутов, например value, используя точку: myEle.value.

Зная вышесказанное, вы можете применить его ко всем функциям, которые вам требуются (см. Мой пример кода выше).).

0 голосов
/ 16 апреля 2019

В качестве примера я сделал быстрый кодовый блок.

Этого можно добиться, передав параметр в функцию onClick. В этом примере я отслеживаю последнюю нажатую кнопку и текст, который она должна отображать. Если последней нажатой кнопкой была та же самая кнопка, переключается обратно на значение по умолчанию. Надеюсь, это поможет.

https://codepen.io/maffekill/pen/rbpjzw

HTML 

<p>Click the button to swap the text of the DIV element:</p>

<p><button onclick="myFunction(1, 'TEXT A')">TEXT A</button></p>
<p><button onclick="myFunction(2, 'TEXT B')">TEXT B</button></p>
<div id="myDIV">Default Text</div>

JS 

// Keep track of the button currently clicked
var activeBtn = null; 

function myFunction(btnId, text) {

  var x = document.getElementById("myDIV");
  // If the last button is the same as the new one, show default text
  if (activeBtn === btnId) {
    x.innerHTML = "Default Text";
    activeBtn = null
  } else {
  // Else show the text given to the text param
    x.innerHTML = text;
      activeBtn = btnId;
  }


}
...