1

我正在构建一个Rails 3.2.1带有 jQ​​uery UI 切换的应用程序。我想要这里显示的功能：http: //jsfiddle.net/balintbako/PauWy/472/。

但是当我将 erb 变量添加到我的代码中时，我失去了仅针对一个元素的能力。换句话说，当我在一个项目上单击“+”时，所有项目都显示“添加”。

我的 HTML 代码：

<ul id="menu-items">
    <% @menu_items.each do |item| %>
        <li id="item_<%= item.id %>">
            <div class="trigger"><%= item.name %>
                <div class="menu-item" >
                    <p class="to-do">
                        <span> + </span>
                        <span> - </span>
                        <div class="add">Add</div>
                        <div class="reduce">Reduce</div>
                    </p>
                </div>
            </div>
        </li>
    <% end %>
</ul>

我的 Javascript 代码：

$('.menu-item').toggle();  // Initially hide all the items

$('.add').hide();
$('.reduce').hide();

$('.to-do > span').click(function () {
    var ix = $(this).index();  
    $('.add', $(this).parents('div')).toggle(ix == 0);    
    $('.reduce', $(this).parents('div')).toggle(ix == 1);
    return false;
});

我很难理解这种奇怪的行为，请帮忙。

4

0 回答 0