Question

我试图将一个更改变量传递给下面的jquery函数，但遗漏了一块。

  $(document).ready(function(){    

  var area = "NW";

  $("#NWbutton").click(function (){
   $('#mainmap > img').attr('src', "some_web_"+area+"_address_forpics_time.gif");
  });


});

对于＆＃34; NW按钮＆＃34;我需要var area =＆＃34; NW＆＃34;。我有20个左右的按钮和相应的变量。如何为每个按钮传递这些而不是写出每个变量？

Answer 1

data属性为此问题提供了完美的解决方案。您可以将与该按钮相关的任何数据放入属性中，然后可以在click处理程序中读取该属性。像这样：

<div id="mainmap">
    <img src="foo.jpg" data-area="NW" />
    <img src="bar.png" data-area="SW" />
</div>

$("#NWbutton").click(function (){
    $('#mainmap > img').attr('src', function() {
        return "some_web_" + $(this).data('area') + "_address_forpics_time.gif";
    });
});

Answer 2

在Rory McCrossan之后，个人button或input[type=button]可以包含与该元素的选择变量相对应的text或value， IEG，

<button>NW</button>

或

<input type="button" value="NW" />

HTML

<div id="mainmap">
    <img src="foo.jpg" alt="NW"/>
    <img src="bar.png" alt="SW"/>
    <img src="baz.jpg" alt="NE"/>
    <img src="foobar.png" alt="SE"/>
</div>

JS

$(document).ready(function() {    
  // with `input` elements , substitute
  // `input[type='button']` , `$(e.target).val()`
  // for `button` , `$(e.target).text()` , respectively
  $("button").click(function (e) {
   var area = $(e.target).text();
   $('#mainmap > img[alt='+ area +']')
   .attr('src', "some_web_" 
         + area
         + "_address_forpics_time.gif");
  // console.log($("img[alt='" + area + "']").attr("src"))
  });    
});

jsfiddle http://jsfiddle.net/guest271314/hphe11qu/

将变量传递给jquery函数

2 个答案: