Question

我有一个js隐藏了与toggle（）的链接的问题。问题是：

我获得了一份商家列表，每个商家都在一个href链接上隐藏了一个电话号码。单击一个链接时，仅显示所单击链接的编号，显示所有链接的所有编号我的js代码：

$(document).ready(function(){
$("p").css('display', 'none')
    $("a").click( function(){
        $("p").slideToggle('slow');
    });
});

我知道为什么，但我不知道如何通过id显示。我正在使用php。

<div id='phone'><a href='#' id='$eid'>Veja nosso telefone!

<p".$e2['telefone']."/>

$eid我来自DB。

Answer 1

这是一种可行的方法。您可以使用$(this)选择器告诉解释器您想要当前元素。

$(document).ready(function(){
$("p").css('display', 'none')
     $("a").click( function(){
         $(this).slideToggle('slow'); // would only slidetoggle $(this) which is the element that was just clicked.
     });
});


 <div id='phone'><a href='#' id='$eid'>Veja nosso telefone!

 <p".$e2['telefone']."/>

Answer 2

尝试：

$("a").click( function(){
    $(this).find("p").slideToggle('slow');
});

this函数中的{p> click指的是点击的DOM元素，find会在其中包含p个元素。

Answer 3

我 ASUME 您的HTML应如下所示：

<div id='phone'>
    <a href='#' id='someID01'>Veja nosso telefone!
        <p>012-45567890</p>
    </a>
    <a href='#' id='someID02'>Veja nosso telefone!
        <p>5486</p>
    </a>
    <a href='#' id='someID03'>Veja nosso telefone!
        <p>088-9001</p>
    </a>
    <a href='#' id='someID04'>Veja nosso telefone!
        <p>Secret!</p>
    </a>
    <!-- etc. -->
</div>

然后这个JavaScript将起作用

$(function () {
    $('#phone > a').click(function (e) {
        // Do not follow the link, even if it's '#'
        e.preventDefault();

        // Toggle it's p-element
        $(this).find('p').slideToggle('slow');
    });
});

当您点击链接时，此脚本将切换链接中的p元素。

Answer 4

使用.引用类，使用#引用ID。非前缀名称引用标记类型（即p，div，span等）。对于css和jQuery都是如此。

$('.class') // references all instances of class named 'class'.
$('#id') // references item with id = 'id'.

有关详细信息，请参阅官方jQuery selector guide。

Answer 5

好吧，让我们从你不需要把你的javascript设置为元素的默认样式这一事实开始。

首先，不要在你的javascript中执行此操作：

$("p").css('display', 'none');

您应该使用CSS来设置默认样式：

p{display:none}

没有不必要的JavaScript代码可以为用户带来更好的性能。

其次，我不确定#phone是否是ID的正确语义用法，ID的使用是针对标记上唯一的内容。因此，对于将在列表中使用的内容，语义选择是类。

所以，让我们解决你的代码问题......

首先，您的标记也存在一些问题，您的p标记不正确且您的标记未关闭。下面是对HTML代码的可能更正：

<div class='phone'>
  <a href='#' id='<?= $eid; ?>'>Veja nosso telefone!</a>
  <p><?= $e2['telefone']; ?></p>
</div>

使用该代码切换p的可见性将使用以下代码

$('.phone a').on('click', function(e){
  $(this).next().toggle('slow'); // this refer to the A tag that was clicked, and .next() selects the next element on the DOM, which in this case is the P tag
  e.preventDefault(); // it is a good thing to use to avoid the default behavior of the A tag
});

有关树遍历方法的更多信息，请访问：http://api.jquery.com/category/traversing/tree-traversal/

Answer 6

$("a").click( function(){
    var myId = $(this).prop("something that gives you the corresponding id, like a classname");
    $("#"+myId).slideToggle('slow');
});

隐藏并通过id显示href

6 个答案: