Question

每个h5元素中都有一个编辑按钮，如果我单击此按钮，它将隐藏带有类名“不可编辑”的div。并使用类名称显示div＆＃39; editable＆＃39;。

我编写的代码只有在我有一个容器但我添加另一个容器并尝试单击编辑按钮才能完美地工作，它会更新相应容器的两个div。

我在附上上述功能的代码。

只需点击“编辑”即可。并且它会更新两个div，我正在寻找的是，只更新我点击编辑按钮的相应div而不是所有div [基于＆＃39;这个＆＃39;重视它会更新div，我尝试使用＆＃39;这个＆＃39;但是不知道为什么它不起作用，如果可能的话，试着解释为什么我的代码不起作用，因为我是JavaScript的新手。]。

希望您提前理解并感谢您的帮助。

＆＃13;

$('.edit_toggle').click(function(e){
  e.preventDefault();
  var noEdit = $('.not-editable');
  var edit = $('.editable');
  if($(this).find(noEdit)){
    $(noEdit).fadeOut();
    $(edit).fadeIn();
  }
});

＆＃13;

.not-editable{
	display: block;
}
.editable{
	display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container-1">
  <h5>
    header 
    <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="not-editable">
     Lorem
  </div>
  <div class="editable">
    Lorem 123
  </div>
</div>
<div class="container-1">
  <h5>
   another header 
   <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="row not-editable">
     another Lorem
  </div>
  <div class="row editable">
    another Lorem 123
  </div>
</div>

＆＃13;

Answer 1

你有几个问题。首先，您需要检索所有student_id和.not-editable元素，而不仅仅是与点击的.editable相关的元素。其次，.edit_toggle是this。对.edit_toggle进行调用是多余的，因为您要查找的元素不是其中的子元素。最后，您需要检查find()条件中的length属性，因为jQuery选择器返回一个始终等于if的对象。

要解决此问题，您可以修改逻辑以获取true容器，然后closest()从那里获取所需的元素，如下所示：

＆＃13;

find()

＆＃13;

$('.edit_toggle').click(function(e) {
  e.preventDefault();
  var $container = $(this).closest('.container-1');

  $container.find('.not-editable').fadeOut();
  $container.find('.editable').fadeIn();
});

＆＃13;

.not-editable { display: block; }
.editable { display: none; }

＆＃13;

Answer 2

执行此操作时：

  var noEdit = $('.not-editable');
  var edit = $('.editable');

您已经在DOM中查询具有这些类的对象，因此将它们保存到变量中（将其与document.querySelectorAll('.not-editable')进行比较）。将类保存为字符串（或硬编码或其他）时尝试相同的操作：

  var noEdit = '.not-editable';
  var edit = '.editable';

Answer 3

使用parent和find。示例如下。

$('.edit_toggle').click(function(e){
  e.preventDefault();
  var noEdit = $(this).parent().parent().find('.not-editable');
  var edit = $(this).parent().parent().find('.editable');
  if($(this).find(noEdit)){
    $(noEdit).fadeOut();
    $(edit).fadeIn();
  }
});

.not-editable{
	display: block;
}
.editable{
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container-1">
  <h5>
    header 
    <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="not-editable">
     Lorem
  </div>
  <div class="editable">
    Lorem 123
  </div>
</div>
<div class="container-1">
  <h5>
   another header 
   <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="row not-editable">
     another Lorem
  </div>
  <div class="row editable">
    another Lorem 123
  </div>
</div>

Answer 4

{      
  'k1' => {
            'b' => 'b1',
            'c' => '0',
            'a' => 'a1'
          },
  'k2' => {
            'a' => 'a2',
            'b' => 'b2',
            'c' => 'c2'
          },
  'k3' => {
            'c' => 'c3',
            'b' => 'b3',
            'a' => 'a3'
          },
  'k4' => {
            'a' => 'a4',
            'c' => 'c4',
            'b' => 'b4'
          }
}

如果你想保持相同的HTML结构，上面的脚本将适合你。

Answer 5

使用此JS

获取对最近容器的引用

DataFrame.nunique()

仅按以下方式选择该容器内的元素

var container = this.closest('.container-1');

整个JS

 var noEdit = $('.not-editable',container);
 var edit = $('.editable',container);

<强>段

＆＃13;

$('.edit_toggle').click(function(e){
  e.preventDefault();
  var container = this.closest('.container-1');
  var noEdit = $('.not-editable',container);
  var edit = $('.editable',container);
  if($(this).find(noEdit)){
    $(noEdit).fadeOut();
    $(edit).fadeIn();
  }
});

＆＃13;

$('.edit_toggle').click(function(e){
  e.preventDefault();
  var container = this.closest('.container-1');
  var noEdit = $('.not-editable',container);
  var edit = $('.editable',container);
  if($(this).find(noEdit)){
    $(noEdit).fadeOut();
    $(edit).fadeIn();
  }
});

＆＃13;

.not-editable{
	display: block;
}
.editable{
	display: none;
}

＆＃13;

点击时切换div内容

5 个答案: