Question

我有一个非常简单的任务：

使用data-ui tag
使用鼠标悬停和鼠标移出事件绑定到复选框或单选按钮的标签
在标签悬停上添加类并按标签hover out删除

这是我的代码

var HoverRadioCheck = {

  init: function() {
    this.findRadioCheckInput();
    this.bindToLabel();
  },

  findRadioCheckInput: function() {
      $("input[type='radio'], input[type='checkbox']").find.dataAttr('ui-checkbox', 'ui-radiobutton');

  },

  bindToLabel: function() {
      $("input[type='radio'], input[type='checkbox'] + label").bind( "mouseenter mouseleave", function() {
        $( this ).toggleClass( "entered" );
      });

    }

};

HoverRadioCheck.init();

<div class="form-group">
        <input name="checkbox_test_2" id="checkbox_test_2_1" class="checkbox" type="checkbox" data-ui-checkbox/>
        <label for="checkbox_test_2_1">Bacon ipsum dolor amet salami andouille corned beef</label>
</div>

<div class="form-group">
    <input name="radiobutton_test_1" id="radiobutton_test_1_1" class="radiobutton" type="radio" data-ui-radiobutton/>
    <label for="radiobutton_test_1_1">Lorem Ipsum</label>
</div>

任何帮助都将受到高度赞赏

Answer 1

我真的很困惑你真正需要什么...但我试图使你的代码有效......但是肯定这不是最好的方法！

var HoverRadioCheck = {

  init: function() {
    this.findRadioCheckInput();
    this.bindToLabel();
  },

  findRadioCheckInput: function() {
      var elements=$("input[type='radio'][data-ui-radiobutton], input[type='checkbox'][data-ui-checkbox]").find("input");
      elements.prevObject.each(function(){
          var id=$(this).attr("id");
          if($("label[for="+id+"]").length>0)
          {
            $("label[for="+id+"]").bind( "mouseenter mouseleave", function() {
                $(this).toggleClass("entered");
            });
          }
      });  
  },

  bindToLabel: function() {
      
    }

};

HoverRadioCheck.init();

.entered
{
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="form-group">
        <input name="checkbox_test_2" id="checkbox_test_2_1" class="checkbox" type="checkbox" data-ui-checkbox/>
        <label for="checkbox_test_2_1">Bacon ipsum dolor amet salami andouille corned beef</label>
</div>

<div class="form-group">
    <input name="radiobutton_test_1" id="radiobutton_test_1_1" class="radiobutton" type="radio" data-ui-radiobutton />
    <label for="radiobutton_test_1_1">Lorem Ipsum</label>
</div>

我添加了一个小的css类“输入”..能够检查鼠标何时进入/离开

Answer 2

好了，现在很清楚，你所做的很好，但几乎没有变化，让我解释一下：

1）没有名为item.find.dataAttr甚至item.dataAttr的JQuery函数，它应该是item.data('ui-checkbox')或item.attr('data-ui-checkbox')

<强>无效：

$("input[type='radio']").find.dataAttr('ui-radiobutton');

$("input[type='radio']").dataAttr('ui-radiobutton');

<强>有效：

$("input[type='radio']").attr('data-ui-radiobutton');

$("input[type='radio']").data('ui-radiobutton');

基本上attr()函数在元素中查找ANY属性，因此您必须提供属性的完整名称，但另一方面data()函数只查找data-属性，在这种情况下，您需要在data-之后仅提供名称，例如ui-radiobutton。另一方面，find()完全不同 - 它找到了ELEMENT而不是属性，所以基本上根据您的要求，您甚至不需要它。使用find()的示例可能是：

$('.form-group').find('input[type='radio']'); //this will give you the radio ELEMENTs

2）这很简单，你的bindToLabel函数很好，除非你需要提供+ label甚至第一个参数。你的没有效，但它不会绑定单选按钮的标签，但会绑定单选按钮本身。我假设你不想那样。所以它应该是：

$("input[type='radio'] + label, input[type='checkbox'] + label").bind(

所以你的最终JQuery看起来应该是 - Codepen here

var HoverRadioCheck = {

  init: function() {
    this.findRadioCheckInput();
    this.bindToLabel();
  },

  findRadioCheckInput: function() {
      $("input[type='radio'], input[type='checkbox']").data('ui-checkbox', 'ui-radiobutton');
  },

  bindToLabel: function() {
      $("input[type='radio'] + label, input[type='checkbox'] + label").bind( "mouseenter mouseleave", function() {
        $( this ).toggleClass( "entered" );
      });
    }

};

HoverRadioCheck.init();

具有data-ui标记的Checkbox和Radiobutton的悬停功能

2 个答案: