-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

您正在 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 回答
2

您应该.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>

然后在父级上绑定事件（当然在准备好的功能之外）

$('#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 回答
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 回答