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");
    });
});

在悬停时，由于foreach背景颜色发生变化，但在第二个及以上结果上有悬停效果。请帮我解决这个问题我很感谢你

Answer 1

只需更改悬停时的背景颜色，CSS就是您需要的工具。首先，您需要使用class而不是id，因为ID应该是唯一的。

所以

<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“奖励”。

解决方案可能是您将ID更改为类，并将散列更改为jquery中的点。

Answer 3

将您的ID更改为类：

{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");
    });
});

在使用foreach的翱翔的Chaging背景颜色

3 个答案: