jquery幻灯片向上/向下工作很有趣

jquery slideUP/DOWN working funny

本文关键字：工作 幻灯片 jquery      更新时间：2023-09-26

在下面的代码中，当我选择标记为"是"的单选按钮时，它确实会向下滑动。但是当我单击标记为"否"的那个时，它不会向上滑动。这是为什么呢？

.html： 

<label>Yes</label><input type="radio" name="teacher" id="teacher" value="yes"/>
<label>No</label><input type="radio" name="teacher" id="teacher" value="no"/><br>

jquery：

$("#teacher").click(function() {    
    if($(this).val() === "yes")
    {
        $("#teacher-info").slideDown();
    }
    else if($(this).val() === "no")
    {
        $("#teacher-info").slideUp();
    }
});

您有两个id为 teacher 的元素。

id意味着一个唯一的属性（只有一个元素有一个特定的id），jQuery假设这是真的。如果你有两个元素具有相同的id，jQuery总是选择第一个。

话虽如此，您问题的解决方案是将id更改为 class ，旨在用于许多元素。

HTML：

<label>Yes</label>
<input type="radio" name="teacher" class="teacher" value="yes"/>
<label>No</label>
<input type="radio" name="teacher" class="teacher" value="no"/>

JavaScript：

$(".teacher").click(function() {    
    if($(this).val() === "yes")
    {
        $("#teacher-info").slideDown();
    }
    else if($(this).val() === "no")
    {
        $("#teacher-info").slideUp();
    }
});

顺便说一下，由于您的单选按钮只有两种状态（yes 和 no ），因此您的代码可以简化：

$(".teacher").click(function() {    
    if ($(this).val() === "yes") {
        $("#teacher-info").slideDown();
    } else {
        $("#teacher-info").slideUp();
    }
});

要在 Jquery 中获取radiobutton值，您可以简单地执行以下操作：

$('input:radio[name=teacher]:checked').val();

首先更改您的代码并添加一个class：

<label>Yes</label>
<input type="radio" name="teacher" class="teacher" value="yes"/>
<label>No</label>
<input type="radio" name="teacher" class="teacher" value="no"/>

所以现在像这样更改你的代码：

$(".teacher").click(function() {  
    var btnValue = $('input:radio[name=teacher]:checked').val()
    if(btnValue === "yes")
    {
        $("#teacher-info").slideDown();
    }
    else if(btnValue === "no")
    {
        $("#teacher-info").slideUp();
    }
});
相关文章：