-2

ページ上の複数の画像から JQuery 関数を呼び出そうとすると、問題が発生します。誰かが私を助けてくれたら、それは素晴らしいことです。

これは私のコードです：

HTML

        <input type="image" name="rateButton[1]" src="img/Rate1.png" height="40" width="40" value="1" onclick="rateBox(1)"/>
        <input type="image" name="rateButton[2]" src="img/Rate2.png" height="40" width="40" value="1" onclick="rateBox(2)"/>
        <input type="image" name="rateButton[3]" src="img/Rate3.png" height="40" width="40" value="1" onclick="rateBox(3)"/>
        <input type="image" name="rateButton[4]" src="img/Rate4.png" height="40" width="40" value="1" onclick="rateBox(4)"/>
        <input type="image" name="rateButton[5]" src="img/Rate5.png"  height="40" width="40" value="1" onclick="rateBox(5)"/>
        <input type="image" name="rateButton[6]" src="img/Rate6.png" height="40" width="40" value="1" onclick="rateBox(6)"/>
        <input type="image" name="rateButton[7]" src="img/Rate7.png" height="40" width="40" value="1" onclick="rateBox(7)"/>
        <input type="image" name="rateButton[8]" src="img/Rate8.png" height="40" width="40" value="1" onclick="rateBox(8)"/>
        <input type="image" name="rateButton[9]" src="img/Rate9.png"  height="40" width="40" value="1" onclick="rateBox(9)"/>
        <input type="image" name="rateButton[10]" src="img/Rate10.png" height="40" width="40" value="1" onclick="rateBox(10)"/><br>

JQuery

$(document).ready(function(){
    function rateBox(rating){
        // Ajax Call here...
    }
});
4

4 に答える 4

2

.ready()他の人が示唆しているように、関数を関数の外に移動する必要があります。

また、複数の要素にイベントをアタッチするためのベスト プラクティスは、イベントを親要素に委任することです。1 つのイベントのみをアタッチし、使用されたセレクターからバブルアップするイベントをリッスンします。元。JQueryを使用して...

$(parent-container).on('click', element-selector, function(e){
  // Ajax call here.
});

あなたの状況では、親ラッパー (id = "ratings") を追加し、rateButtons (class = "rateButton") にクラスを追加できます。

わかりやすくするためにDOMを減らしました。

<div id="ratings">
    <input type="image" class="rateButton" name="rateButton[1]" src="img/Rate1.png" height="40" width="40" value="1"/>
    <input type="image" class="rateButton" name="rateButton[2]" src="img/Rate2.png" height="40" width="40" value="1"/>
    <input type="image" class="rateButton" name="rateButton[3]" src="img/Rate3.png" height="40" width="40" value="1"/>
    <input type="image" class="rateButton" name="rateButton[4]" src="img/Rate4.png" height="40" width="40" value="1"/>
    <input type="image" class="rateButton" name="rateButton[5]" src="img/Rate5.png"  height="40" width="40" value="1"/>
</div>
<br>

次に、イベントを親にバインドします（もちろん、準備完了関数の外で）

$('#ratings').on('click', '.rateButton', function(e){
   /* alternatively if the additional parent element is not desired  
      the event can be delegated to the document */

   var elem = this; // to refer to the clicked object
   var index = $(this).index(); // to get the index, this index is 0 based
   alert('clicked element index: '+index);
   // Ajax call here.
});

例

JQuery.on()ドキュメント

于 2013-02-19T07:15:10.343 に答える
2

jQuery の DOMReady イベント内で関数を定義しています。JS エンジンは既にオブジェクトrateBox()内を検索しているため、これにより例外が発生しwindowます。メソッドの外に移動$(document).ready()すれば問題ありません。

<script type="text/javascript">
function rateBox(rating){
    // Ajax Call here...
}
</script>

この関数は画像のクリック イベントによって呼び出されるため、とにかく関数が実行されるまでに DOM が既に読み込まれていると推測されるため、DOMReady 内にラップすることは不要です。

于 2013-02-18T10:41:19.743 に答える
1

document.ready 関数の外に移動します。

function rateBox(rating){
    // Ajax Call here...
}

$(document).ready(function(){

});

document.ready の外で定義することにより、それは のスコープ内にwindowあり、インラインonclickイベントはすべてwindowオブジェクトのスコープ内にあるため、アクセスできます。

window本当に必要な場合は、実際には document.ready 関数からスコープを達成できます (ただし、そうする理由はありません)。

$(document).ready(function(){
    window.rateBox = function(rating){
        // Ajax Call here...
    };
});
于 2013-02-18T10:40:39.113 に答える
0

document.ready関数の外部でrateBox関数を定義する必要があります。

function rateBox(rating){
    //do it
}
$(document).ready(function(){
  // Ajax Call here...
});
于 2013-02-18T10:45:04.180 に答える