Question

我提取了这个简单的javascript函数来显示或隐藏here中的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是不好的做法。我想在https://stackoverflow.com/a/688228/2063292之后使javascript不引人注目。但是，该模板提供了一种方法来为具有指定ID的任何链接执行一些javascript（例如，所有具有id =＆＃34的链接; test＆＃34;将调用某个函数）。我需要有一种方法允许任何链接将特定div的名称传递给函数，如原始示例中所示，但我不知道如何执行此操作。

Answer 1

我更喜欢div的ID在链接的哈希中：

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

取决于你想要多么不引人注目。你可以这样做（使用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一样）。

Answer 3

使用此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的工作方式类似。你可能想尝试一下。

我如何不引人注目地使用这个javascript？

3 个答案: