javascript - 将工具提示附加到复选框

Question

对于下表:

<table>                    
  <tr>
    <td>
      <label for="check">
        <input type="checkbox" name="check" id="check" value="true" />
        Select something
      </label>
    </td>

    <td>
      <label for="select">
        <select name="select" id="select">
        <option value="Default"></option>
        <option value="A">A</option>
        <option value="B">B</option>
      </label>
    <td>
  </tr>

我正在尝试附加一个条件，如果它被选中并且在下拉列表中选择了“默认”，则工具提示会显示消息“错误”。

到目前为止我的 jquery:

if ($("#check").is(":checked")) {  
  $select = $("#select");
  if ($select.val() == "Default") {
    $select.addClass("ui-tooltip"({ content: "error" }));                     
  }
}

工具提示的 CSS:

.ui-tooltip  
{  
   background: #FFFCC; 
   border: 1px solid blue;        
}

Answer 1

如果你想在每次用户单击复选框时检查选择中的值，你必须附加一个 .change() 事件处理程序，否则你的浏览器将不知道何时运行功能。像这样的东西:

$('#check').change(function(){
    if ($("#check").is(":checked")) {  
        $select = $("#select");
        if ($select.val() == "Default") {
            $select.addClass("ui-tooltip");                     
        }
     }
})

这会告诉您的浏览器运行该函数，并在您每次更改 ID 为 check(本例中为您的复选框)的输入元素中的值时检查选择框中的值。如果您想向其中添加一些自定义内容，您可能需要执行更多的 jquery 代码。

请注意添加类方法的外观。我不确定您是否可以从那里添加内容，虽然可能是错误的