javascript - 使用 html 按钮一次刷新 X 个 div 元素。如何让我的代码更短？

Question

我有三个 div 和一个 button。在我的 jQuery 脚本中，每次我点击按钮时，这三个 divs 元素都会立即刷新。

HTML 代码

<input id="refresh" type="button" value="Refresh"/>
<div id="R1">Value 1</div>
<div id="R2">Value 2</div>
<div id="R3">Value 3</div>

JQUERY 代码

var $JQ_ = jQuery.noConflict();

$JQ_(document).ready(function () {

    $JQ_("#refresh").click(function () {
        $JQ_("#R1").load("index.php#R1").fadeOut(1000).fadeIn(1000);
    });
    $JQ_("#refresh").click(function () {
        $JQ_("#R2").load("index.php #R2").fadeOut(1000).fadeIn(1000);
    });
    $JQ_("#refresh").click(function () {
        $JQ_("#R3").load("index.php #R3").fadeOut(1000).fadeIn(1000);
    });
});

JSFIDDLE 示例 here .

我想做的是让我的代码更短，而不是必须为我的所有 div 编写相同的东西。在另一个脚本中，我正在使用类似这样的东西

 $JQ_("[id^='opener_']").click(function () {
     $JQ_("#dialog_" + this.id.split('_')[1]).dialog("open");
 });

但这是另一种情况。知道如何让我的代码像这样工作吗？

Answer 1

<input id="refresh" type="button" value="Refresh"/>
<div id="R1" data-url="index.php #R1" class="thing">Value 1</div>
<div id="R2" data-url="index.php #R2" class="thing">Value 2</div>
<div id="R3" data-url="index.php #R3" class="thing">Value 3</div>

为每个“事物”添加一个类。在点击事件中，遍历每个“事物”，获取 url 以从 data-url 属性加载数据，然后执行以下操作:

$JQ_("#refresh").click(function() {
    $JQ_('div.thing').each(function() {
        var url = $JQ_(this).data('url');

        $JQ_(this).load(url).fadeOut(1000).fadeIn(1000);
    });
});