Question

目前有一个文字＆＃34;按钮＆＃34;在我的View中，通过id调用Javascript函数。

View代码，混合使用PHP和HTML以及一些JS。

<?php foreach($restaurant_by_legal_entities[$legal_entity_id] as $restaurant_id): ?>
    <tr style="outline: thin solid">
        <td class="left">
            <a
                id="collapse-restaurant"
                data-token="<?= $token ?>"
                style="text-decoration:none"
                class="text"><?= $text_expand_symbol ?>
            </a>
        </td>
        <td class="left"></td>
        <td class="left"><strong>Sub-total - <?= $restaurant_name ?></</td>
        <td class="left"></td>
        <td class="left"></td>
        <td class="left"></td>
        <td class="left"></td>
        <td class="left"></td>
        <td class="right"><strong>￥<?= $total_by_restaurants[$restaurant_id] ?></strong></td>
    </tr>
<?php endforeach ?>

我的JS档案：

/**
 * Generate the URL to collapse the financial report to only show the totals
 * only city, legal entity, and restaurant
 */
function collapse() {
    console.log("Blah");
    var url = commonGet('report/sale_financial', $(this).data('token'));

    var collapse = $('input[name=\'collapse\']').attr('value');

    if (collapse == 1) {
        url += '&collapse=' + 0;
    } else if (collapse == 0){
        url += '&collapse=' + 1;
    }

    window.location = url;
}

$('#collapse-restaurant').click(collapse);

我注意到当我点击第一个按钮（第一个意思是第一个索引）时，我的collapse函数将被调用[使用Chrome调试器进行测试]。但是，不会调用第一个索引之后的所有内容。经过一些自我研究后，似乎每个id必须是唯一的，而且目前并非如此。

由于每个id似乎.click()必须是唯一的，因此如何解决此问题？

Answer 1

在我的视图中使用class代替id：

<?php foreach($restaurant_by_legal_entities[$legal_entity_id] as $restaurant_id): ?>
    <tr style="outline: thin solid">
        <td class="left">
            <a
                class="text collapse-restaurant"
                data-token="<?= $token ?>"
                style="text-decoration:none"><?= $text_expand_symbol ?>
            </a>
        </td>
        <td class="left"></td>
        <td class="left"><strong>Sub-total - <?= $restaurant_name ?></</td>
        <td class="left"></td>
        <td class="left"></td>
        <td class="left"></td>
        <td class="left"></td>
        <td class="left"></td>
        <td class="right"><strong>￥<?= $total_by_restaurants[$restaurant_id] ?></strong></td>
    </tr>
<?php endforeach ?>

在JS文件中将处理程序绑定更改为：

$('.collapse-restaurant').click(collapse);

Javascript函数调用需要唯一名称

1 个答案: