使用foreach更改悬停时的背景色

Question

我正在使用这段代码(smarty php模板代码)

{foreach $rewards as $reward}
                            <div id="reward" data-id="{$reward['id']}">
                                <div class="reward_data{$reward['id']}">
                                    <b>{strtoupper($reward['title'])}:</b><br/>
                                    {html_entity_decode($reward['description'])}
                                    <br/>
                                    <br/>
                                    <b>Estimated Delivery:</b> {$reward['estimated_delivery_date']}
                                    <br/>
                                    <br/>
                                    <button class="btn btn-danger">Select This Project</button>
                                </div>
                            </div>
                            <br/>
                            <br/>
                            <br/>
                        {/foreach}

在jquery中，我使用

$(document).ready(function () {
    $('#reward').hover(function () {
        var reward_id = $(this).attr('data-id');
        $('.reward_data' + reward_id).css("background-color", "#2bde73");
        $('.reward_data' + reward_id).css("padding", "10px");
        $('.reward_data' + reward_id).css("border-radius", "10px");
    }, function () {
        var reward_id = $(this).attr('data-id');
        $('.reward_data' + reward_id).css("background-color", "#ffffff");
    });
});

在前一次的悬停结果中，背景颜色发生了变化，但在第二次和第二次以上的结果中，有悬停的影响。请帮我介绍一下，我很感谢你

Answer 1

对于简单地改变悬停时的背景颜色，CSS是你需要的工具。首先，您需要使用class而不是id，因为ids应该是唯一的。

所以

<div id="reward" data-id="{$reward['id']}">

变成了

<div class="reward" data-id="{$reward['id']}">

然后创建一个新的CSS规则，如下所示

.reward:hover .reward-data {
    background-color: #2bde73;
    padding: 10px;
    border-radius: 10px;
}

不需要JS和jQuery。

Answer 2

看看这个：Can multiple different HTML elements have the same ID if they're different elements?

如果您知道一个ID需要是唯一的，那么您将会发现这是行不通的:您多次使用ID "reward“。

一种解决方案是将ID更改为一个类，并在jquery中将散列更改为一个点。

Answer 3

将您的id更改为class：

{foreach $rewards as $reward}
                            <div class="reward" data-id="{$reward['id']}">
                                <div class="reward_data{$reward['id']}">
                                    <b>{strtoupper($reward['title'])}:</b><br/>
                                    {html_entity_decode($reward['description'])}
                                    <br/>
                                    <br/>
                                    <b>Estimated Delivery:</b> {$reward['estimated_delivery_date']}
                                    <br/>
                                    <br/>
                                    <button class="btn btn-danger">Select This Project</button>
                                </div>
                            </div>
                            <br/>
                            <br/>
                            <br/>
                        {/foreach}

和jquery，如下：

$(document).ready(function () {
    $('.reward').hover(function () {
        var reward_id = $(this).attr('data-id');
        $('.reward_data' + reward_id).css("background-color", "#2bde73");
        $('.reward_data' + reward_id).css("padding", "10px");
        $('.reward_data' + reward_id).css("border-radius", "10px");
    }, function () {
        var reward_id = $(this).attr('data-id');
        $('.reward_data' + reward_id).css("background-color", "#ffffff");
    });
});