Question

我正在学习jquery，但我很难弄清楚如何设置两个属性并同时给它一个回调函数....我有如何设置多个属性的代码，我有代码如何给它一个回调函数，但我怎么把它们放在一起... 这是设置多个atrributes的代码：

 <script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr({
      "href" : "http://www.w3schools.com/jquery",
      "title" : "W3Schools jQuery Tutorial"
    });
  });
});
</script>
</head>

<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Change href and title</button>
<p>Mouse over the link to see that the href attribute has changed and a title attribute is set.</p>

以下是带回调函数的代码

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr("href", function(i,origValue){
      return origValue + "/jquery"; 
    });
  }); 
});
</script>
</head>

<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>

所以我如何将它们组合在一起？ 感谢先进的任何人花时间。

Answer 1

您可以使用链接（更多关于jQuery链接：http://www.jquery-tutorial.net/introduction/method-chaining/），如下所示：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr("href", function(i,origValue){
      return origValue + "/jquery"; 
    }).attr('title','Tutorial');
  }); 
});
</script>


<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>

http://jsfiddle.net/FHD84/

Answer 2

我对你要做的事情的理解是：

点击该按钮后，<a>标记会将其href更改为jQuery页面。
单击该链接时，将重置原始值

如果这是正确的，我会这样做：

//-- $(function () {...}) is shorthand notation for $(document).ready(function () {...});
$(function () {
    //-- I stored the lookup for #w3s to prevent duplicate calls to $()
    var $link = $('#w3s');
    //-- store the original attribute values using jQuery data()
    $link.data({
        'href': $link.attr('href'),
        'title': $link.attr('title')
    });
    //-- This is essentially the same as your $('button').click(), but using delegation
    $(document).on('click', 'button', function () {
        //-- update the attributes
        $link.attr({
            'href': 'http://www.w3schools.com/jquery',
            'title': 'W3Schools jQuery Tutorial'
        })
        //-- on click, reset the original values
        $link.on('click', function (event) {
            //-- event.preventDefault() will stop the link from performing its default functionality
            //-- in this case, that would be following the href
            event.preventDefault();
            //-- pull the original values from jQuery data()
            $link.attr({
                'href': $link.data('href'),
                'title': $link.data('title')
            });
        });
    });
});

JSFiddle链接：http://jsfiddle.net/9x56L/

注意：我在此示例中禁用了链接。我不确定这是什么情况，但是从页面重定向可能不是预期的结果。

Answer 3

当然，您可以这样做（将函数存储在变量中，然后将其分配给属性）

工作示例 - ＆gt; http://jsfiddle.net/HKEeB/2/

$(document).ready(function(){
  $("button").click(function(){
    var func= function(i,origValue){
      return origValue + "/jquery"; 
    };
      $("#w3s").attr({
      "href" : func,
      "title" : "W3Schools jQuery Tutorial"
    });
  });
});

如何设置href和title属性并同时给它一个回调函数？

3 个答案: