Question

我有一些代码，你点击一个链接，jQuery打开一个div。在正常状态下，链接显示“观看视频”，我想让它工作，以便当div变为可见时，链接文本将变为“关闭视频”。点击关闭的视频链接会关闭div。

以下是我正在尝试做的一个示例：http://jsfiddle.net/XsvG9/

这是实际的代码：

JS

$("span.trigger a").click(function() {
    the_id = $(this).attr('id');

$("#toggle_container-"+the_id).slideToggle(500, function() {
    $("span.trigger a"+the_id).text($(this).is(':visible') ? 'Close video' : 'Watch video');
    });
});

HTML

<p class="data">Posted Feb 20 | <a href="/supersecret/jsmith/post/399/">0 comments</a> |<span id="votes_count399" class="votes_count"> 0 </span>

<span id="vote_buttons399" class="vote_buttons">faves<a id="399" title="Favorite This" class="vote_up" href="javascript:;">#</a></span> | <span class="trigger"><a id="399" href="javascript:;">Watch video</a></span>
</p>

<div class="hide" id="toggle_container-399" style="display: none;">
    <iframe width="555" height="315" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/z1c1OIMbmb0"/></div>
</div>

我在div切换打开的地方工作，但链接不切换文本。我一直盯着这个太长时间了，所以如果一双新眼睛可以帮我找到错误，我会很感激。

感谢您的帮助。

Answer 1

您的锚点具有相同的ID 399，这就是创建主要问题的原因。

而不是.text()方法，也可以使用.html()来更改文字。

This demo消除了所有问题，并且运作正常。

Answer 2

您需要知道的第一件事是您不能使用重复的ID。你有2个具有相同ID的锚点 - 这是无效的，只会导致同一页面上多部电影出现问题。如果将ID存储在数据属性中，则可以重复使用它来选择要显示的正确影片元素。你还应该给你的锚类，这样你就可以控制不同的功能（喜欢，切换等）

HTML：

<a href="javascript:;" data-movie-id="399" class="watch">Watch video</a>

JS：

$("span.trigger a.watch").click(function() {
    the_id = $(this).attr('data-movie-id');
    anchor = $(this);

    $("#toggle_container-" + the_id).slideToggle(500, function() {
        anchor.text($(this).is(':visible') ? 'Close video' : 'Watch video');

    });
});

工作jsFiddle：http://jsfiddle.net/XsvG9/7/

Answer 3

我会删除链接周围的额外范围，将切换div的id添加到链接的href，然后在链接的文本周围添加一个范围：

$(".trigger").click( function(){
var lnk = $(this).attr("href");
$(lnk).slideToggle(300, "easeInOutSine");
}).toggle(
  function(){
       $(this).children('span').html('Close ');},
   function(){
        $(this).children('span').html('Watch ');
  })

Working Demo here

Answer 4

你从你点击的链接中获取了id，然后使用该id创建一个选择器，以便引用回“this”

$("span.trigger a").click(function() {
      the_id = $(this).attr('id');  

    $(this).text($(this).is(':visible') ? 'Close video' : 'Watch video');

    $("#toggle_container-"+the_id).slideToggle(500);

    return false;
});

更新了示例http://jsfiddle.net/XsvG9/2/

在点击处理程序中，“this”指的是选择器中实际点击的元素

使用JQuery切换div并进行链接文本切换

4 个答案: