Question

我有两个像这样的输入字段

<input type="text" class="span3" id name="name" >
<input type="text" class="span3" id name="phone" >

<div class="show-example1">
      show content 1
</div>
<div class="show-example2">
      show content 2
</div>

我想在点击输入字段“name”后显示div元素“show-example1”

并在点击输入字段“phone”

后仅显示div元素“show-example2”

为此，我将两个div元素与每个输入字段相关联。

以下是我执行上述操作的脚本

 $('.show-example1').hide();
  $('.show-example2').hide();

$("input[name='name']").bind("click", function(event){

            $('.show-example2').hide();
            $('.show-example1').show(400);
            return false;

        }); 

    $("input[name='phone']").bind("click", function(event){

            $('.show-example1').hide();
            $('.show-example2').show(400);
            return false;

        });

我的脚本工作正常，但我只是想知道更好的方法来执行上述操作。

Answer 1

这是我的解决方案。简而言之 - 我利用标记属性focus和blur事件来处理此任务。与其他人相比，它的好处在于，您可以使用少量jQuery来覆盖所有表单元素，而无需手动切换所有其他div开启/关闭，同时保持JS的不引人注目的方法。

HTML

<form>
    Other information <textarea name="other_information" class="hintable" hint-class="show-example1"></textarea><br />
    Nationality <textarea name="nationality" class="hintable" hint-class="show-example2"></textarea><br />
    <div class="example show-example1">
        Example 1
    </div>
    <div class="example show-example2">
        Example 2
    </div>
</form>

CSS

.example
{
    display: none;
}

JS

$('.hintable').focus(function() {
   $('.example').hide();
   $("."+$(this).attr('hint-class')).show();
});

$('.hintable').blur(function() {
   $('.example').hide();
});

Fiddle link。

Answer 2

我认为你的例子很简单。如果我是你，我会出于性能原因缓存选择器：

var showExample1 = $('.show-example1');
var showExample2 = $('.show-example2');

然后在代码中使用它们，使用快速id选择器而不是慢速输入/名称选择器：

$("#phone").bind("click", function(e){
   e.preventDefault();
   showExample1.hide();
   showExample2.show(400);
});

等等。您还可以将click事件绑定到单个事件中以最小化代码并具有更好的可读性：

$("#name, #phone").bind('click.toggle', function(e) {
  e.preventDefault();
  if ($(this).prop('id') == 'name') {
     showExample1.hide();
     showExample2.show(400);
  } else {
     showExample2.hide();
     showExample1.show(400);
  }
});

点击活页夹（'.toggle'）上的命名空间有助于您在以后取消绑定它。

IF 你想要真正的DRY代码，你可以尝试这样的事情：

var togglers = {phone: 'show-example1', name: 'show-example2'};
$.each(togglers, function(toggler, toggled) {
   $('#' + toggler).on('focus', function(e) { // if you call focus, also selecting the input via keyboard will work
     e.preventDefault();
     $('.' + toggled).show(400).siblings().hide(); // hiding all the elements on the same DOM level instead of just one
   });
});

Answer 3

我建议做.on（'click'，function（event）{而不是bind。 Here是一个解释一点的页面。

看起来你正试图制作jQuery accordions。看看那个链接。

单击输入字段后显示/隐藏div元素的更好方法

3 个答案: