Question

我想我可能会遗漏一些东西或者没有掌握jQuery的基础知识。我已经搜索了几个小时但尚未找到我的问题的答案。

我有一个旧网站，我正在升级使用jQuery，许多链接调用传递多个参数的JavaScript onClick调用，如下例所示：

<a href="#" onclick="displayData('Book Title', 'ISBN', 'dateOfPublishing', 'Price');">View Details</a>

问题是我用各种jQuery代码更新了旧displayData函数，displayData函数在

内

$(document).ready(function() { 
});

代码，这似乎阻止使用displayData调用函数onClick，因为它说对象期望。我已将displayData函数从$(document).ready()移出，但这样做会阻止引用$(document).ready()代码中的其他函数。

我所拥有的一个简要示例如下：

<script>
  $(document).ready(function() {
    function displayData(title, isbn, dt, price) {
      // there's a call to jQuery AJAX here
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebServices/BookService.asmx/GetBookReviews",
            data: "{isbn: '" + isbn + "'}",
            dataType: "json",
            success: function(msg) {
                DisplayReviews(msg.d);
            }
        });
      return false;
    }

    function DisplayReviews(data) {
       // data normally formatted here and passed to formattedData variable
       var formattedData = FormatData(data);
       $('#reviewScreen').html(formattedData);
    }

    function FormatData(data) {
      // function reformats data... code removed for space..
      return data;
    }


  });
</script>


<table>
  <tr><td><a href="#" class="reviewLink" onclick="displayData('Book Title', '1234141HABJA1', '2010-01-12', '$15.99');">View Reviews</a></td><td>Book Title</td></tr>
  <tr><td><a href="#" class="reviewLink" onclick="displayData('Book TItle 2', '516AHGN1515', '1999-05-08', '$25.00');">View Reviews</a></td><td>Book Title 2</td></tr>
</table>

我想要做的是能够删除链接中的onclick="displayData();"，而是使用jQuery点击引用，例如

$('a.reviewLink').click(function() {
  displayData(parameters go here....);
});

我只是不知道如何将参数传递给链接中的函数，因为它们不再位于HTML onclick属性中。

如果我继续使用链接中的onclick属性，并将displayData(params)移出$(document).ready()代码块，它可以正常工作，但是当我尝试引用任何内容时在$(document).ready()代码块中的其他函数中，我得到了与DisplayReviews(param)等其他函数相关的可怕对象错误。

我不知道这是否有任何意义....抱歉，如果它令人困惑，我不是世界上最好的程序员，并且不一定知道所有的术语，所以我尽力解释。我希望你能提供帮助。

非常感谢

Answer 1

初始化代码应该进入.ready（），而不是库函数，可以在单独的.js文件中定义。

<script src="yourFunctions.js"></script>
<script>
    $(document).ready(function(){

         $('a.reviewLink').click(function() {
             displayData(parameters go here....); // in yourFunctions.js
         });

    });
</script>

在不使用内联javascript的情况下传递内联参数的替代方法是在标签上使用HTML5的“data-”属性。您也可以在xhtml，html等中使用它，它只是有效。

HTML：

<div data-name="Jack" data-lastname="black">My name is</div>

jquery的：

 $('div').click(function(){
      alert($(this).attr('data-name') + ' ' + $(this).attr('data-lastname'));
 });

注意：您必须使用jQuery的.attr()或原生.getAttribute()方法来检索“数据 - ”值。

我一直在使用'data-'。

Answer 2

正如Skilldrick所指出的，displayData不需要在文档准备好的包装器中定义（也可能不应该）。

你想要使用jQuery click事件赋值而不是onClick是正确的 - 它使你的代码更容易阅读，并且是Unobtrusive Javascript原则所要求的。

对于您想要传递的参数，有几种方法可以执行此任务。如果您不关心XHTML合规性，可以在链接上放置一些自定义属性，然后从脚本中访问它们。例如：

<a href="#" booktitle="Book Title" isbn="ISBN" pubdate="Publish Date" price="Price">View Details</a>

然后在您的点击事件中：

$('a.reviewLink').click(function() {
  var booktitle = $(this).attr('booktitle');
  var isbn = $(this).attr('isbn');
  var pubdate = $(this).attr('pubdate');
  var price = $(this).attr('price');
  displayData(booktitle, isbn, pubdate, price);
});

我相信这里有人会把这种方法谴责为最黑暗的邪恶，但过去它对我来说效果很好。或者，您可以使用隐藏的数据集跟踪每个链接，如下所示：

<a href="#">View Details</a>
<ul class="book-data">
   <li class="book-title">Book Title</li>
   <li class="book-isbn">ISBN</li>
   <li class="book-pubdate">Publish Date</li>
   <li class="book-price">Price</li>
</ul>

创建一个CSS规则来隐藏数据列表：.book-data { display: none; }，然后在点击事件中：

$('a.reviewLink').click(function() {
  var $bookData = $(this).next('.book-data');
  var booktitle = $bookData.children('.book-title').text();
  var isbn = $bookData.children('.book-isbn').text();
  var pubdate = $bookData.children('.book-pubdate').text();
  var price = $bookData.children('.book-price').text();
  displayData(booktitle, isbn, pubdate, price);
});

有很多方法可以完成你的任务，但那些是最让人想起的两个方法。

Answer 3

我这样做了，所以即使问题得到解答，其他人也会发现它有用。 http://jsbin.com/axidu3

HTML

<table border="0" cellspacing="5" cellpadding="5">
    <tr>
        <td>
            <a href="#" class="reviewLink">View Reviews</a>
            <div class="displayData">
                <span class="title">Book Title 2</span>
                <span class="isbn">516AHGN1515</span>
                <span class="pubdata">1999-05-08</span>
                <span class="price">$25.00</span>
            </div>
            </td>
        <td>Book Title 2</td>
    </tr>
</table>

的JavaScript

<script type="text/javascript" charset="utf-8">
    jQuery(".reviewLink").click(function() {
        var title = jQuery(".title", this.parent).text();
        var isbn  = jQuery(".isbn", this.parent).text();
        var pubdata = jQuery(".pubdata", this.parent).text();
        var price = jQuery(".price", this.parent).text();

        displayData(title, isbn, pubdata, price);
    });

    function displayData(title, isbn, pubdata, price) {
        alert(title +" "+ isbn +" "+ pubdata +" "+ price);
    }
</script>

CSS

<style type="text/css" media="screen">
    .displayData {
        display: none;
    }
</style>

将javascript onclick事件更改为jquery click并仍然传递参数

3 个答案: