如何使此代碼與jQuery一起工作？

我使用jQuery作爲標準庫。但是，我不得不使用Prototype來執行一個簡單的功能。但是這造成了衝突！如何使此代碼與jQuery一起工作？

如何讓下面的代碼與jQuery一起工作並分配Prototype？

<script type="text/javascript" language="javascript"> 
function trim(str){str = str.replace(/^\s*$/, '');return str;} 
function signup() { 
    var email = trim($F("email")); 
    var name = trim($F("name")); 
    //EMAIL VALIDATION 
    var goodEmail = email.match(/\b(^(\[email protected]).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\.arpa)|(\.asia)|(\.cat)|(\.int)|(\.jobs)|(\.tel)|(\.travel)|(\.xxx)|(\..{2,2}))$)\b/gi); 
    apos=email.indexOf("@");dotpos = email.lastIndexOf(".");lastpos=email.length-1; 
    var badEmail = (apos<1 || dotpos-apos<2 || lastpos-dotpos<2); 
    if (name=="") { 
     $("myResponse").style.display="inline";     //3 lines to show and style the error message 
     $("myResponse").style.color="white";      // there are more ways to do it using css classes for example. 
     $("myResponse").innerHTML="Por favor, digite seu nome";  // you could also make an error function. 
     $("name").clear(); $("name").focus();          // clear the field and put cursor inside 
     return false; 
     /* YOU CAN REPEAT THE ABOVE ELSE IF BLOCK IF YOU HAD OTHER FIELDS IN YOUR FORM, 
      LIKE LAST NAME, ADDRESS ETC. AS AN EXAMPLE SEE HOW THE NAME IS HANDLED AND REPEAT 
     */ 
    } 
    else if (email=="" || !goodEmail || badEmail) { 
     $("myResponse").style.display="inline";    //3 lines to show and style the error message 
     $("myResponse").style.color="white"; 
     $("myResponse").innerHTML="Por favor, insira um email válido"; 
     $("email").focus(); 
     return false; 
    } 
    else { 
     //YOU MAY WANT TO CHANGE THE URL IN THE LINE BELOW 
     var url = "includes/optIn.php"; 
     var params = $("subform").serialize(); 
     new Ajax.Request(url, {onComplete:showResponse, onException:showException, onFailure:showException, asynchronous:true, method:'post', evalScripts:false, postBody:params}); 
     $("submit", "myResponse").invoke('hide'); // Hide the buttom and the message 
     $("loading").show();      // show the loading image. 
     return false; 
    } 
} 
function showResponse(req) { 
     $("loading").hide(); 
     $("myResponse").innerHTML=req.responseText; //Writes the "Thank you" message that comes from optIn.php and styles it. 
     $("myResponse").style.display="inline"; 
     $("myResponse").style.color="white"; 
     $("submit").show(); 
     $("name", "email").invoke('clear'); 
} 
function showException(req) { 
    $("myResponse").innerHTML=req.responseText; 
    alert("A comunicação com o servidor falhou. Tente novamente!"); 
    $("loading", "myResponse").invoke('hide'); 
    $("submit").show(); 
    $("name", "email").invoke('clear');  
} 
</script>

來源

2013-03-12 Élisson Kário

你想一下，替換的/看了解每行/命令正在做什麼，並找到jQuery的等價物。你究竟在哪裏卡住？ – 2013-03-12 18:22:03

只有一個功能的原型？你不需要爲此包含一個完整的庫。轉換它！你試圖分配Prototype的是什麼？ – Bergi 2013-03-12 18:32:10

你試過jQuery.noConflict（）嗎？

http://api.jquery.com/jQuery.noConflict/

來源

2013-03-12 19:01:03 tsuensiu

的jQuery，你將需要改變使用# id selector的選擇。此外，jQuery不區分集合和單個元素，它總是調用集合中每個元素的方法。

特別是，你將使用的.val()，.css()，.show()，.hide()和.focus()方法來代替原型和本地DOM方法。另外，您將切換到jQuery.ajax功能 - 請在API docs中查看它們。

來源

2013-03-12 19:25:15 Bergi

以下是一些您需要完成

$F('id') => $('#id').val(); 

//directly 
$("id").style.display='inline' => $('#id')[0].style.display='inline'; 

//the "jQuery" way 
$("id").style.display='inline' => $('#id').css('display','inline') 

$("id").style.color="white" => $("#myResponse").css('color',"white") 

$("id").innerHTML="Por favor, digite seu nome" => $('#id').html("Por favor, digite seu nome") 

//.clear() has no direct equivalent method but this is close 
$("id").clear() => $('#id').val(null) 

$("subform").serialize() => $("#subform").serialize() 

$("submit", "myResponse").invoke('hide') => $("#submit, #myResponse").hide()

這些都是簡單的替代品，我要把它留給你做Ajax.Request()轉換爲$.ajax()

來源

2013-03-12 20:45:13

如何使此代碼與jQuery一起工作？

回答

相關問題