0

我对隐藏带有切换（）的链接的 js 有疑问。问题是：

我得到一个企业列表，每个企业都有一个隐藏在 aa 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我从数据库中得到。

4

6 回答 6

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']."/>
于 2013-06-06T14:00:30.237 回答
1

尝试：

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

thisinsideclick函数是指被单击的 DOM 元素，find将获取其中的p元素。

于 2013-06-06T14:01:15.570 回答
1

我假设您的 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当您单击它时，此脚本将切换链接内的元素。

于 2013-06-06T14:03:53.350 回答
0

用于.引用类和#引用 ID。无前缀名称引用标签类型（即p, div,span等）。这对于 css 和 jQuery 都是如此。

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

有关详细信息，请参阅官方jQuery 选择器指南。

于 2013-06-06T13:54:42.043 回答
0

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

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

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

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

p{display:none}

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

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

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

首先，您的标记也有一些问题，您的 p 标签不正确并且您的 a 标签没有关闭。下面是对您的 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/

于 2013-06-06T14:19:47.610 回答
-1 
$("a").click( function(){
    var myId = $(this).prop("something that gives you the corresponding id, like a classname");
    $("#"+myId).slideToggle('slow');
});
于 2013-06-06T13:56:34.420 回答