0

我有两个这样的输入字段

<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>

单击输入字段“名称”后，我只想显示 div 元素“show-example1”

并在单击输入字段“电话”后仅显示 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;

        });

我的脚本运行良好，但我只想知道一种更好的方法来执行上述操作。

4

3 回答 3

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();
});

​</p>

小提琴链接。

于 2012-07-05T12:37:29.180 回答
0

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

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') 上的命名空间会有所帮助。

如果你想拥有真正 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
   });
});
于 2012-07-05T12:32:38.727 回答
0

我建议做 .on('click', function(event){ 而不是 bind。这是一个解释一点的页面。

看起来您正在尝试制作 jQuery 手风琴。看看那个链接。

于 2012-07-05T12:32:52.163 回答