Jquery:更改属于直接父级的特定同级类

Jquery: Alter a specific sibling class that belongs to an immediate parent.

本文关键字：属于 Jquery      更新时间：2023-09-26

在我的HTML页面上，我有几个表单。

它们都遵循一种模式：

  1. 每个表单都在一个名为 "form-optional" 的div 中
  2. 此 DIV 内部是一个复选框，它包装在类"form-enable"
  3. 实际形式有一类"form-main"。

我想使用Jquery，这样当用户点击复选框时，"form-main"就会被隐藏。但是，只有与单击的复选框属于同一"表单可选"div 的表单才应隐藏。所有其他表格应保持不变。

我知道您可以使用 Jquery 命令 .parent（） 来定位类的父类，然后将其与 find（） 结合使用以在该 parent（） 中查找特定类。但是，当我使用这些命令时，它似乎不起作用。

JSFIDDLE 在这里

这是我的Jquery：

// JavaScript Document
(function($)
{

$(document).ready(function(){
    $(".form-optional .form-enable input").click(function(){

        if(($this).attr('checked')){
            $(this).parent().find('.form-main').fadeIn();
        }
        else
        {
            $(this).parent().find('.form-main').fadeOut();
        }
    });
    });

})(jQuery);

这是我的 HTML：

<div class="form-optional">
    <p class="form-enable">
        <input name="personaldetails" type="checkbox" value="">No Personal Details
    </p>
    <p class="form-explanation">If this product is a gift, you can tick the box, to omit the personal details</p>

    <form name="frmPersonal" class="form-main">
        Name:
        <input type="text" name="ordPersonalInfo1" value="" onkeyup="Restrict_Chars(this.form.ordPersonalInfo1,30);">
    </form>
</div>

<div class="form-optional">
    <p class="form-enable">
        <input name="friendsdetails" type="checkbox" value="">No Friends Details
    </p>
    <p class="form-explanation">If you have no friends, you can tick the box to omit friends</p>

    <form name="frmPersonal" class="form-main">
        Name:
        <input type="text" name="ordPersonalInfo1" value="" onkeyup="Restrict_Chars(this.form.ordPersonalInfo1,30);">
    </form>
</div>

复选框的父元素是 p 元素，这就是您找不到表单元素的原因（您需要在选中的属性上修复 $ 位置。您可以使用 parents（），但您必须指定您只需要第一个元素，否则它将应用于该类的所有元素。尝试：

   $(".form-optional .form-enable input").click(function(){
    if($(this).attr('checked')){
      $(this).closest('div').find('.form-main').fadeOut();
    }
    else
    {
       $(this).closest('div').find('.form-main').fadeIn();
    }
});

此外，我在示例中切换了顺序，因为您希望在单击复选框时隐藏，而不是取消单击：

http://jsfiddle.net/8xrQe/5/

你需要这样做：

$(".form-optional .form-enable input").click(function () {
    if (($this).attr('checked')) {
        $(this).parents().find('.form-main').fadeIn();
    } else {
        $(this).parents().find('.form-main').fadeOut();
    }
});

由于.parent()该方法仅搜索 DOM 树的一个级别，但.parents()搜索到 DOM 树的顶层。

因此，当您使用.parent()方法时，它无法找到form-optional类div，因此您的代码不起作用。

这是因为form-main不是父元素的后代，它是复选框元素父元素的同级。因此，基于标记的一种可能的解决方案是查找form-optional元素，然后在其中查找form-main。

jQuery(function ($) {
    $(".form-optional .form-enable input").change(function () {
        if (this.checked) {
            $(this).closest('.form-optional').find('.form-main').fadeIn();
        } else {
            $(this).closest('.form-optional').find('.form-main').fadeOut();
        }
    }).change();
});

演示：小提琴

使用 .parents() ，但为其指定选择器。

试试这个：

var enableInput = function()
{
    var checkbox = $("input[type='checkbox']");
    checkbox.click(function(){
        if ($(this).is(":checked")) {
            $(this).parents(".form-optional").find(".form-main").fadeIn();
        } else {
            $(this).parents(".form-optional").find(".form-main").fadeOut();
        }
    });
}
enableInput();

JSFiddle 中的示例。

使用 .next（）：

给定一个表示一组 DOM 元素的 jQuery 对象， .next()方法允许我们搜索紧随其后的 这些元素在 DOM 树中的同级并构造一个新的 jQuery 对象中的匹配元素。

相关文章：