0

jQuery を標準ライブラリとして使用しています。ただし、単純な機能を実行するには Prototype を使用する必要がありました。しかし、これは衝突を引き起こしました!

以下のコードを jQuery で動作させ、プロトタイプを配布するにはどうすればよいですか?

<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(^(\S+@).+((\.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>
4

3 に答える 3

0

#jQuery の場合、 id セレクターを使用するようにセレクターを変更する必要があります。また、jQuery はセットと単一の要素を区別せず、常にコレクション内の各要素のメソッドを呼び出します。

特に、、、、、およびメソッドを使用して.val()、Prototype およびネイティブ DOM メソッドを置き換えます。また、関数に切り替えます - API docsでそれらを調べます。.css().show().hide().focus()jQuery.ajax

于 2013-03-12T19:25:15.493 に答える
0

完了する必要がある交換の一部を次に示します。

$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-12T20:45:13.790 に答える
0

jQuery.noConflict() を試してみますか?

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

于 2013-03-12T19:01:03.877 に答える