Question

在我的网页上，我有一个名为<select>的{{1}}标记。旁边是一个名为＆＃34; wholeThingBody＆＃34;这是通过jQuery隐藏的。

#boxID

我需要的是让用户点击<select id='boxID'> <option value='option1'> option1</option> <option value='option2'> option2</option> </select> <div id='wholeThingBody'> Some content to permanently display once .change has been fired once </div>一次以显示隐藏的<select>问题，但是当用户在选择中选择另一个选项时，DIV会再次隐藏。（它有点切换）

如何在用户仅触发<DIV>一次时进行此操作？我尝试更改ID，但它不起作用

.change

Answer 1

 //var to remember if its fired before.
 var fired = false;
 $("#boxID").change(function () { 
      if(!fired){
         $(this).next().slideToggle(300); //show the content of div #wholeThingBody
         $(this).id = "okna"; 
         fired = true;
    }
 });
$("#wholeThingBody").hide();

Answer 2

使用one()注册一个只会触发一次的处理程序，因为您要显示该元素，而不是使用slideToggle()使用slideDown()

$("#boxID").one('change', function() {
  $(this).next().slideDown(300); //show the content of div #wholeThingBody
});
$("#wholeThingBody").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id='boxID'>
  <option value='option1'>option1</option>
  <option value='option2'>option2</option>
</select>

<div id='wholeThingBody'>
  Some content to permanently display once .change has been fired once
</div>

Answer 3

只需使用slideDown而不是slideToggle

$("#boxID").change(function () { 
    $(this).next().slideDown(300);
});

Answer 4

尝试使用$.Callbacks("once")，callbacks.fireWith()

var callbacks = $.Callbacks("once");
var fn = function() {
  $(this).next().slideToggle(300); //show the content of div #wholeThingBody
};
callbacks.add(fn);
$("#boxID").change(function() {
  callbacks.fireWith(this);
});
$("#wholeThingBody").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id='boxID'>
  <option value='option1'>option1</option>
  <option value='option2'>option2</option>
</select>

<div id='wholeThingBody'>
  Some content to permanently display once .change has been fired once
</div>

Answer 5

有几种方法可以做到这一点：

使用slideDown （最佳方式）：

$("#boxID").change(function () { 
    $(this).next().slideDown(300);
});
$("#wholeThingBody").hide();

删除侦听器：

$("#boxID").on('change', function() {
    $(this).next().toggleSlide(300);
    $("#boxID").off('change');
});
$("#wholeThingBody").hide();

至于我，我会用CSS课程来做这件事。

CSS：

#wholeThingBody {
    display: none;
}

#wholeThingBody.active { 
    display: block;
}

JS：

$("#boxID").on('change', function() {
    $(this).next().addClass('active'); // It will add a class only once
});

顺便提一下，以后，如果你想改变DOM元素的ID，那么就这样做

this.id = "okna";

而不是

$(this).id = "okna";

因为id是DOM元素的属性，而不是jQuery-property

jQuery .change（）函数必须只触发一次

5 个答案: