2012-10-05 126 views
0

請參閱以下的html代碼:jqTransform ID選擇不工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="Content-Script-Type" content="text/javascript" /> 
    <meta http-equiv="Content-Style-Type" content="text/css" /> 
    <meta name="gmapkey" content="" /> 
    <meta name="description" content="" /> 
    <meta name="keywords" content="" /> 

    <title></title> 

    <link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" /> 
    <link rel="stylesheet" href="demo.css" type="text/css" media="all" /> 

    <script type="text/javascript" src="requiered/jquery.js" ></script> 
    <script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" ></script> 
    <script language="javascript"> 
     $(document).ready(function() { 
      $('#abc').jqTransform({imgPath:'jqtransformplugin/img/'}); 
       }); 
    </script> 

</head> 
<body> 

    <form class="formTransform" action="post.php" method="POST"> 
     <div class="rowElem"><label>Input Text:</label><input type="text" name="inputtext"/></div> 
     <div class="rowElem"><label>Input Password:</label><input type="password" /></div> 
     <div class="rowElem"><label>Checkbox: </label><input type="checkbox" name="chbox" id=""></div> 
     <div class="rowElem"><label>Radio :</label> 
      <input type="radio" id="" name="question" value="oui" checked ><label>oui</label> 
      <input type="radio" id="" name="question" value="non" ><label>non</label></div> 
     <div class="rowElem"><label>Textarea :</label> <textarea cols="40" rows="12" name="mytext"></textarea></div> 

     <div class="rowElem"> 
      <label>Select :</label> 
      <select name="select"> 
       <option value="">1&nbsp;</option> 
       <option value="opt1">2&nbsp;</option> 
      </select> 
     </div> 
     <div class="rowElem"> 
      <label>Select Redimentionné :</label> 
      <select name="select2" > 
       <option class ="abc" value="opt1">Big Option test line with more wordssss</option> 
       <option value="opt2">Option 2</option> 
       <option value="opt3">Option 3</option> 
       <option value="opt4">Option 4</option> 
       <option value="opt5">Option 5</option> 
       <option value="opt6">Option 6</option> 
       <option value="opt7">Option 7</option> 
       <option value="opt8">Option 8</option> 
      </select> 
     </div> 

     <div class="rowElem"><label>Submit button:</label><input id="abc" type="submit" value="Envoyer" /></div> 
     <div class="rowElem"><label>Reset button:</label><input type="reset" value="Annuler" /></div> 
     <div class="rowElem"><label>Input button:</label><input type="button" value="bouton" /></div> 

    </form> 

</body> 
</html> 

爲什麼

$(document).ready(function() { 
     $('#abc').jqTransform({imgPath:'jqtransformplugin/img/'}); 
      }); 

不起作用!
但這

$(document).ready(function() { 
     $('.formTransform').jqTransform({imgPath:'jqtransformplugin/img/'}); 
      }); 

作品!

這個jQuery選擇器有什麼問題?

在此先感謝

+0

你正在改變兩個完全不同的事情。 – BoltClock

+0

@BoltClock我只是想在表單中轉換一些按鈕,而不是所有的按鈕,並且HTML代碼只是爲了向您顯示問題! – MoonLight

+0

我對此很car!!爲什麼不工作? – MoonLight

回答

1

看看插件的代碼,你必須調用jqTransform有沒有與你選擇的形式。
順便說一句,請注意,插件是:「放棄項目,說再見。」 (jcamenisch創作的7個月前)
插件代碼:

$.fn.jqTransform = function (options) { 
var opt = $.extend({}, defaultOptions, options); 

/* each form */ 
return this.each(function() { 
    var $form = $(this); 
    if ($form.hasClass('jqtransformdone')) { 
    return; 
    } 
    $form.addClass('jqtransformdone'); 

    $('input:submit, input:reset, input[type="button"]', this).jqTransInputButton();