Question

＆＃13;

    function show() { 
        if(document.getElementById('intake').style.display=='none') { 
            document.getElementById('intake').style.display='block'; 
        } 
        false;
    } 
    function hide() { 
        if(document.getElementById('intake').style.display=='block') { 
            document.getElementById('intake').style.display='none'; 
        } 
        false;
    }

＆＃13;

 <div id="opener"><a href="#1" name="1" onmouseover="show();" onclick="show();" onmouseout="hide();" >click here</a></div> 
    <div id="intake" style="display:none;">Text
           <div id="upbutton"><a onmouseout="hide();">click here</a></div> 
    </div> 
    
    
 <div id="opener"><a href="#1" name="2" onmouseover="show();" onclick="show();" onmouseout="hide();" >click here</a></div> 
    <div id="intake" style="display:none;">text
           <div id="upbutton"><a onmouseout="hide();">click here</a></div> 
    </div>

＆＃13;

我写了两个函数，我需要它们来获取用户点击的ID。并显示该信息。我不想为每个ID编写不同的函数，因为我有很多。有人可以指出我正确的方向。

＆＃13;

    function show() { 
        if(document.getElementById('this is where all of the divs would go i presume').style.display=='none') { 
            document.getElementById('this is where all of the divs would go i presume').style.display='block'; 
        } 
        false;
    }

＆＃13;

我想我会添加整个内容以减轻任何混淆。

Answer 1

做这样的事情：

<div onclick='show(this)'>click me</div>

<script>    
    function show(element) { 
        if(element.style.display=='none') { 
            element.style.display='block'; 
        } 
        return false;
    } 
</script>

Answer 2

您可以使用jquery的类选择器。 https://api.jquery.com/class-selector/

您可以向具有相同类的元素添加操作。触发该操作后，您可以使用关键字this。

获取元素的ID

Answer 3

不要这样做。 click事件将包含指向发生单击的DOM对象的指针：

https://api.jquery.com/event.target/

<script>
$( "body" ).click(function( event ) {
  $( "#log" ).html( "clicked: " + event.target.nodeName );
});
</script>

这意味着绝对不需要为每个人分配一个ID，这样你就可以将其定位为点击处理程序。

Answer 4

如果您知道按钮/链接/控件的ID，可以将其传递给函数，如下所示：

function show(id) { 
        if(document.getElementById(id).style.display=='none') { 
            document.getElementById(id).style.display='block'; 
        } 
        false;
    }

如果您无法将id显式传递给每个按钮的函数，您可以使用以下内容动态检索它：

Getting the ID of the element that fired an event

Answer 5

JavaScript的：

function DivShow(elm)
{
   if(elm.style.display=="block") {elm.style.display="none"};
} 

<div id="Div1" onclick="DivShow(this);" > Some stuff here </div>
<div id="Div2" onclick="DivShow(this);" > Some  Other stuff here </div>

如果你加载了JQuery ...... Jquery的：

function DivShow(elm)
{
   if( $(elm).css("display") =="block" ) {$(elm).css("display", "none")};
} 
<div id="Div1" onclick="DivShow(this);" > Some stuff here </div>
<div id="Div2" onclick="DivShow(this);" > Some  Other stuff here </div>

Answer 6

所以我弄清楚我的脚本出了什么问题。我在减速时没有把ID改成

    function show(id) { 
        if(document.getElementById(id).style.display=='none') { 
            document.getElementById(id).style.display='block'; 
        } 
        false;
    }

像魅力一样工作

Answer 7

您需要的是名为事件委派的内容。这个怎么运作？我们来看下面的HTML。

<p id="first">i am first</p>
<p id="second">i am second</p>

<hr/>

<p class="hide-trigger" data-find="first">hide first</p>
<p class="hide-trigger" data-find="second">hide second</p>

如您所见，“hide-trigger”类有两个元素。假设您想要使用第一个“隐藏触发器”隐藏第一个段落，使用第二个“隐藏触发器”来执行与第二个段落相同的操作。

显然，你不想仅仅因为要隐藏不同的元素而编写两次相同的逻辑。我们可以将您要隐藏的元素的ID存储在data attribute中。我选择了data-find，但你可以选择任何你想要的东西。顺便说一下，这不是事件委托，这只是解决了数据传输的问题。另外，我将使用以下函数隐藏元素：

function hide (element) {
  if ( window.getComputedStyle(element).display === 'block' ) { 
     element.style.display = 'none'; 
  }
}

事件委托是一种技术，您不会在DOM中的单个元素上附加事件侦听器，而是在这些元素的父元素上附加事件侦听器。为简单起见，我选择了body标签，但只要包含您感兴趣的所有元素，DOM树中的任何祖先元素都可以正常工作。当点击发生时，事件将从“目标”（被点击的元素）向上“冒泡”，沿DOM树向上，直到它到达正文。在那里你可以检查你是否对点击的元素感兴趣，如果你是，你可以做任何事情。在您的情况下，您希望获取要隐藏的元素的ID并将其隐藏。这是你如何做到的。

document.body.addEventListener('click', function (e) {
    var target = e.target;

    // check if a 'hide-trigger' was clicked
    if ( target.classList.contains('hide-trigger') ) {

       var id = target.dataset['find'];
       var element = document.getElementById(id);
       hide(element);

    }

}, false);

为了确保身体标签存在，您可以将所有内容包装在内：

document.addEventListener('DOMContentLoaded', function () {
   // code goes here
}, false);

了解详情：

Answer 8

您可以缓存DOM查询的结果，以获得大多数浏览器的性能优势。

function show(id) { 
    var element = document.getElementById(id);
    if(element.style.display=='none') { 
        element.style.display='block'; 
    } 
    return false;
}

如果您想要一次显示多个元素的功能，可以将CSS selector与document.querySelectorAll结合使用：

function showAll(selector) { 
    var elements = document.querySelectorAll(selector);
    for(var i=0, len = els.length; i < len; i++){
        if(elements[i].style.display=='none') { 
            elements[i].style.display='block'; 
        } 
    }
    return false;
}

例如，showAll(".myclass");会显示所有带有类名“myclass”的元素，showAll("li");会显示所有<li>元素，showAll("#intake");会显示所有带有ID字段设置为“进入”。

查看下面的CSS选择器参考以了解更多信息：

W3 Consortium
Mozilla Developers Reference
Microsoft's Guide to Understanding CSS Selectors
当然，备受诟病的W3Schools CSS Selectors Reference

多个ID的

8 个答案: