JavaScript показать / скрыть элементы по тегу - PullRequest
Новая
       33

JavaScript показать / скрыть элементы по тегу

0 голосов
/ 21 марта 2019

В настоящее время я использую кнопку, которая при нажатии будет отображать или скрывать абзац, мне было интересно, можно ли здесь вместо кнопки иметь ссылку?Очевидно, что для тега нет атрибута onclick.Но я бы предпочел, чтобы это была просто ссылка, по которой нажимали, а не кнопку.

Я постараюсь не слишком утомлять вас большим количеством кода.HTML выглядит так: 

function showMore() {
	var dots = document.getElementById("dots");
	var moreText = document.getElementById("moreInfo");
	var moreText2 = document.getElementById("moreInfo2");
	var btnText = document.getElementById("moreLess");

	if (dots.style.display === "none") {
		dots.style.display = "inline";
		btnText.innerHTML = "See more information";
		moreText.style.display = "none";
		moreText2.style.display = "none";
	} else {
		dots.style.display = "none";
		btnText.innerHTML = "See less information";
		moreText.style.display = "inline";
		moreText2.style.display = "inline";
	}
    }
    <span id="dots">.......</span>

    <button onclick="showMore()" id="moreLess">See more Information</button>
    
    <p id="moreInfo" hidden> some text .</p>
    <p id="moreInfo2" hidden> some other text</p>

Заранее спасибо

Ответы [ 3 ]

1 голос
/ 21 марта 2019

Любой видимый элемент может иметь событие click (включая элемент <a>), поэтому вы можете просто переключить HTML на: 

<a onclick="showMore()" id="moreLess">See more Information</a>

Теперь, если вы сделаете это?Абсолютно нет. Причина в том, что HTML - это семантический язык.Это означает, что мы используем теги, которые лучше всего описывают содержание.Якорные теги описывают навигацию, и использование их просто как «ловушек» для события click является неправильным использованием тега.Использование правильного семантического элемента для вашего контента является ключом к тому, чтобы различные устройства знали, как обрабатывать этот контент.Например, люди с нарушениями зрения полагаются на программное обеспечение для чтения с экрана, которое помогает им просматривать веб-страницы.Эти программы чтения с экрана знают, что <a> элементы означают, что есть способ куда-то ориентироваться.Если вы используете элемент <a>, но не для навигации, эти пользователи получат ошибочные результаты.

Если вы хотите, чтобы что-то визуально напоминало ссылку, а не кнопку, просто установите spanтег с обработчиком событий click.Вы даже можете использовать CSS, чтобы придать ему тот же эффект при наведении, что и у ссылок: 

#moreLess { text-decoration:underline; color:blue; cursor:pointer; }
#moreLess:hover { color: red; }
<span onclick="showMore()" id="moreLess">See more Information</span>

Наконец, вам действительно не следует настраивать обработку событий с помощью встроенных атрибутов событий HTML (onclick) в первомместо.Вот как мы проводили обработку событий более 25 лет назад, и, к сожалению, эта древняя техника не умрет той смертью, которой она заслуживает, потому что часто люди просто копируют чужой код, не зная, что именно копируют, и ужасные сайты, такие как W3Schools, которые до сих пор его продвигают.,Вместо этого вы должны выполнять всю обработку событий в JavaScript отдельно от HTML, например: 

document.getElementById("clickBait").addEventListener("click", function(){
  console.log("Thanks!");
});
#clickBait { cursor:pointer; text-decoration:underline; color:blue; }
#clickBait:hover { background-color:yellow; }
<span id="clickBait">Click me</span>
0 голосов
/ 21 марта 2019

Вы можете иметь onclick для <a> тегов.Не забудьте поставить href="#", если хотите выглядеть как ссылка 

function showMore() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("moreInfo");
var moreText2 = document.getElementById("moreInfo2");
var btnText = document.getElementById("moreLess");

if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "See more information";
    moreText.style.display = "none";
    moreText2.style.display = "none";
} else {
    dots.style.display = "none";
    btnText.innerHTML = "See less information";
    moreText.style.display = "inline";
    moreText2.style.display = "inline";
}
}
<span id="dots">.......</span>

<a href="#" onclick="showMore()" id="moreLess">See more Information</a>

<p id="moreInfo" hidden> some text .</p>
<p id="moreInfo2" hidden> some other text</p>
0 голосов
/ 21 марта 2019

Просто используйте обработчик события click, подобный этому. 

document.addEventListener('click', (e) => {
  if (e.target.matches('#moreLess')) {
    showMore();
  }
});

function showMore() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("moreInfo");
  var moreText2 = document.getElementById("moreInfo2");
  var btnText = document.getElementById("moreLess");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "See more information";
    moreText.style.display = "none";
    moreText2.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "See less information";
    moreText.style.display = "inline";
    moreText2.style.display = "inline";
  }
}
<span id="dots">.......</span>

<a id="moreLess">See more Information</a>

<p id="moreInfo" hidden> some text .</p>
<p id="moreInfo2" hidden> some other text</p>
...