Javascript 多个图像单击JQuery

我在尝试从页面上的多个图像调用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>

---

将其移出document.ready功能：

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

$(document).ready(function(){

});

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

通过在document.ready之外定义它，它就在

窗口

的范围内，您的内联

onclick

事件都在

窗口

对象的范围内，因此可以访问它

实际上，如果您确实想（但没有理由这样做），您仍然可以通过document.ready函数实现

窗口

范围：

---

您正在jQuery的DOMReady事件中定义函数。这将导致异常，因为JS引擎已经在

窗口
对象中查找
rateBox（）
。将其移出
$（document）.ready（）
方法，您应该可以：

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


功能费率箱（额定值）{
//阿贾克斯呼叫这里。。。
}

由于该函数是由图像上的单击事件调用的，因此推断在执行该函数时DOM已经加载，因此将其包装在DOMReady中是多余的。
您应该在文档外部定义rateBox函数。ready函数：

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

$(document).ready(function(){

});

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

您应该按照其他人的建议，将函数移到
.ready（）
函数之外

另外，将事件附加到多个元素的最佳实践是将事件委托给父元素。它将只附加一个事件，并侦听从所用选择器冒泡出现的事件。例如，使用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>


好的，如果我在$（document）.ready（）之外进行Ajax调用，它仍然可以工作吗？是的。当您需要直接处理DOM元素时，只需将其包装在
ready（）
内。是否要在任何图像上单击/？
$('#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.
});