Javascript 使用JQuery切换div并使用链接文本开关

我有一些代码，你点击一个链接，jQuery就会打开一个div。在正常状态下，链接会显示“观看视频”，我希望它能正常工作，这样当div变为可见时，链接文本就会变为“关闭视频”。单击关闭视频链接关闭div

下面是我尝试做的一个例子：

以下是实际代码：

JS

HTML

于2010年2月20日发布
法夫斯|

我让它在div打开的地方工作，但是链接不切换文本。我已经盯着这个太久了，所以如果有一双新的眼睛能帮我找到错误，我将不胜感激

---

感谢您的帮助。

您的锚具有相同的id

399

，这是造成主要问题的原因

不要使用

.text（）

方法，也可以使用

.html（）

更改文本

---

消除了所有问题，工作正常。

您将从单击的链接中获取id，然后使用该id稍后创建一个选择器，以引用回“this”

更新示例

---

在单击处理程序中，“this”指的是选择器中您实际单击的元素，我将删除链接周围的额外跨距，将toggle 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 ');
  })

---

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

HTML:

---

工作JSFIDLE:

链接将始终可见，需要在toggle_容器上执行：可见检查，而不是链接。谢谢，这正是我想要的。我有一种感觉，我忽略了一些简单的东西。谢谢，我会尝试一下，因为它看起来会让事情变得更干净一些。

<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>

$("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;
});

$(".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 ');
  })

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

$("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');

    });
});