Как мне убрать этот javascript?

Question

Я вытащил эту простую функцию JavaScript для показа или скрытия div здесь. Функция:

function ReverseDisplay(d) {
  if(document.getElementById(d).style.display == "none"){
    document.getElementById(d).style.display = "block"; 
  }else{ 
    document.getElementById(d).style.display = "none";
  }
}

Это требует создания ссылки, подобной этой:

<a href="javascript:ReverseDisplay('uniquename')">
   Click to show/hide.
</a>

Насколько я понимаю, такая ссылка на javascript - плохая практика. Я хотел бы сделать JavaScript незаметным после /questions/3196201/kak-ispolzovat-ssyilku-dlya-vyizova-javascript/3196223#3196223. Но этот шаблон обеспечивает способ выполнения некоторого javascript для любой ссылки с указанным идентификатором (например, все ссылки с id="test" будут вызывать некоторую функцию). Мне нужен способ, позволяющий любой ссылке передавать имя определенного div в функцию, как в исходном примере, но я не знаю, как это сделать.

Answer 1

Я бы предпочел, чтобы идентификатор div был в хеше ссылки:

Live JavaScript Demo

<a class="reversible" href="#arbitrarydivId">
Click to show/hide.
</a>

с помощью

function ReverseDisplay() {
  var divId=this.hash.substring(1), div=document.getElementById(divId);
  div.style.display = div.style.display=="none"?"block":"none"; 
  return false;
}

или же

Live jQuery Demo

$(function() {
  $(".reversible").on("click",function(e) {
    e.preventDefault();
    $(this.hash).toggle();
  });
});

---

Старые предложения

window.onload=function() {
  var links = document.querySelectorAll(".reversible");
  for (var i=0;i<links.length;i++) {
    links[i].onclick=ReverseDisplay;
  }
}

с помощью

<a class="reversible" href="#">
Click to show/hide.
</a>

Чтобы скрыть что-то еще, попробуйте

function ReverseDisplay() {
  var divId=this.getAttribute("data-div"), div=document.getElementById(divId);
  div.style.display = div.style.display=="none"?"block":"none"; 
  return false;
}

с помощью

<a class="reversible" data-div="arbitrarydivId" href="#">
Click to show/hide.
</a>

В JQuery все это будет

$(function() {
  $(".reversible").on("click",function(e) {
    e.preventDefault();
    $("#"+$(this.data("div")).toggle();
  });
});

Answer 2

Используйте этот JavaScript, чтобы сделать все это.

function processName(aName){
    //do work like hiding.
    console.log(aName);
}
var body = document.getElementsByTagName('body')[0];
body.addEventListener("click", function(event){
    if(event.target.nodeName === "A"){
        //do work with anchor element
        processName(event.target.dataset.div);
    }
    event.preventDefault();
});

Затем используйте этот HTML в качестве своих ссылок.

<a href="#" data-div="aNamedThing">some link</a>

Вы можете определить свой javascript для этого один раз, тогда всем ссылкам нужен только data-div для отправки имени в processName.

Плохо только то, что атрибуты данных действительно являются новыми для html, поэтому они могут или не могут быть тем, что вы хотите.

Кстати. На самом деле это похоже на то, как работает KnockoutJS. Вы можете попробовать это.

Answer 3

Зависит от того, насколько ненавязчивым ты хочешь быть. Вы можете сделать это (используя jquery для кратких целей):

<a href="#" id="someUniqueId1">
Click to show/hide.
</a>

<a href="#" id="someUniqueId2">
Click to show/hide.
</a>

<script>
  $("#someUniqueId1").click(function(){ReverseDisplay("#DivICareAbout");});
  $("#someUniqueId2").click(function(){ReverseDisplay("#AnotherDivICareAbout");});
</script>

Но тогда вам нужно указать каждую ссылку в вашем JavaScript. Поэтому я бы порекомендовал быть немного более навязчивым, не с JS, а с href. Как это:

HTML:

<div id="foo">I am foo</div>
<div id="bar">I am bar</div>

<a class="reverselink" href="foo">Click to show/hide.</a>
<a class="reverselink" href="bar">Click to show/hide.</a>

JS:

function ReverseDisplay(d) {
    if (document.getElementById(d).style.display == "none") {
        document.getElementById(d).style.display = "block";
    } else {
        document.getElementById(d).style.display = "none";
    }
}

$(function () {
    $(".reverselink").click(function(e){
        ReverseDisplay($(this).attr("href"));
        return false;
    });
});

См. Эту скрипку: http://jsfiddle.net/V73uw/ (опять же, используя сокращенное обозначение jquery. Это также тривиально, чтобы сделать и vanilla js).