JQuery 1.7 $(this).attr('type') for select 给出 undefined 而不是“select-one” - 为什么？答案

【问题标题】：JQuery 1.7 $(this).attr('type') for select gives undefined instead of "select-one" - Why?JQuery 1.7 $(this).attr('type') for select 给出 undefined 而不是“select-one” - 为什么？
【发布时间】：2011-11-04 14:22:00
【问题描述】：

我有一个使用 JQuery 1.4 制作的示例

这里是html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Formularseite</title>
    <link href="style3.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="js/jquery-1.7.js" ></script>
    <script type="text/javascript" src="js/meineScripts.js" ></script>
  </head>
  <body>
<?php
if (isset($_POST['senden']))
{

}
else { ?>
    <form action="formular.php" method="POST" enctype="Multipart/Formdata"> 
      <fieldset>
        <legend>Demo1 JQuery</legend>
        <label for="auswahl1">Auswahl treffen:</label>
        <input class="grouptrigger" type="checkbox" id="auswahl1" name="daten[0]" value="true"/>
        <br/>
        <div class="auswahl1 hide_on_start">
          <label for="eineZeile">Text:</label>
          <input type="text" id="eineZeile" name="daten[1]" value=""/>
        </div>
        <input class="grouptrigger" type="radio" id="auswahl2a" name="daten[2]" value="1" />
        <label for="auswahl2a">Option 1</label>
        <input class="grouptrigger" type="radio" id="auswahl2b" name="daten[2]" value="2" />
        <label for="auswahl2b">Option 2</label>
        <input class="grouptrigger" type="radio" id="auswahl2c" name="daten[2]" value="3" />
        <label for="auswahl2c">Option 3</label>
        <div class="hide_on_start auswahl2a">
          <label for="eineZeile2a">Text Opt1:</label>
          <input type="text" id="eineZeile2a" name="daten[3]" value=""/>
        </div>
        <div class="hide_on_start auswahl2b">
          <label for="eineZeile2b">Text Opt2:</label>
          <input type="text" id="eineZeile2b" name="daten[4]" value=""/>
        </div>
        <div class="hide_on_start auswahl2c">
          <label for="eineZeile2c">Text Opt3:</label>
          <input type="text" id="eineZeile2c" name="daten[5]" value=""/>
        </div>
        <br/>
        <label for="auswahl3">Auswahl treffen:</label>
        <select name="daten[6]" id="auswahl3" class="grouptrigger">
          <option value="0" >Bitte wählen:</option>
          <option value="1" id="auswahl3a" >Eintrag</option>
          <option value="2" id="auswahl3b" >anderer Eintrag</option>
          <option value="3" id="auswahl3c" >weiterer Eintrag</option>
        </select>
        <div class="hide_on_start auswahl3a">
          <label for="eineZeile3a">Text 1:</label>
          <input type="text" id="eineZeile3a" name="daten[7]" value=""/>
        </div>
        <div class="hide_on_start auswahl3b">
          <label for="eineZeile3b">Text 2:</label>
          <input type="text" id="eineZeile3b" name="daten[8]" value=""/>
        </div>
        <div class="hide_on_start auswahl3c">
          <label for="eineZeile3c">Text 3:</label>
          <input type="text" id="eineZeile3c" name=""/>
        </div>        
      </fieldset>
      <p class="font20px"><input type="submit" name="senden" value="Abschicken"></p>
    </form>
<?php } ?>
  </body></html>

这里是js：

// Add RegExp Filter
// From: http://james.padolsey.com/javascript/regex-selector-for-jquery/
$.expr[':'].regex = function(elem, index, match) {
  var matchParams = match[3].split(','),
    validLabels = /^(data|css):/,
    attr = {
      method: matchParams[0].match(validLabels) ? 
            matchParams[0].split(':')[0] : 'attr',
      property: matchParams.shift().replace(validLabels,'')
    },
    regexFlags = 'ig',
    regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
  return regex.test(jQuery(elem)[attr.method](attr.property));
}

$(document).ready(function() {
  $('body').addClass('js');

  // Toggeling groups
  $(".grouptrigger").change( function() 
  {
    var toCheck = ":not(:checked)";
    if ($(this).hasClass('inverse'))
      toCheck = ":checked";
    var hideGroup = "."+this.id;
    // for radio buttons
    alert (" "+$(this).attr('type')+' '+this.id);
    if ($(this).attr('type') == "radio")
    {
      var hideGroupParent=hideGroup.substr(0,hideGroup.length-1);
      try { $("div:regex(class, .*"+hideGroupParent+".*)").hide(0); } catch (err) {}
      if ($("#" + this.id).is(":checked")) 
        $(hideGroup).show(0);
    }
    // for select lists
    else if ($(this).attr('type') == "select-one")
    {
      var hideGroupParent=this.id;
      hideGroup = '.'+$('#' + this.id + ' :selected').attr('id');
      try { $("div:regex(class, .*"+hideGroupParent+".*)").hide(0); } catch (err) {}
      $(hideGroup).show(0);
    }
    else
    // for checkboxes
    {
      if ($("#" + this.id).is(toCheck)) 
        try { $(hideGroup).hide(100); } catch (err) {}
      else
        $(hideGroup).show(100);
    }
  });
  $(".grouptrigger").change();
});

JQuery 1.7 的问题在于

alert (" "+$(this).attr('type')+' '+this.id);

对于选择产生“未定义”而不是像 JQuery 1.4 那样的“选择一”。这是一个错误还是有其他检测选择元素的方法？

【问题讨论】：

标签： jquery html forms

【解决方案1】：

您可以在 jquery 网站上找到此信息

从 jQuery 1.6 开始，.attr() 方法为尚未设置的属性返回 undefined。此外，.attr() 不应用于普通对象、数组、窗口或文档。要检索和更改 DOM 属性，请使用 .prop() 方法。

所以使用prop('type')

【讨论】：

+1。 prop() 在它的介绍引起了轰动之后就消失了。

【解决方案2】：

好吧，从技术上讲，select 没有type 属性（如果有，那就是 HTML 错误），所以它不是错误，而是 jQuery 1.7 的一个特性。如果您想挑出select，只需使用其中任何一个：

$(this).is('select') === true
$(this).filter('select').length > 0

【讨论】：