Question

jQuery("#royal_edit_button").click(function () {        
    jQuery('#royal_edit_title_edit').show();
    jQuery('#royal_edit_price_edit').show();
    jQuery('#royal_edit_desc_edit').show();
    jQuery('#royal_edit_title_view').hide();
    jQuery('#royal_edit_price_view').hide();
    jQuery('#royal_edit_desc_view').hide();
});     

jQuery("#royal_edit_button_back").click(function () {       
    jQuery('#royal_edit_title_edit').hide();
    jQuery('#royal_edit_price_edit').hide();
    jQuery('#royal_edit_desc_edit').hide();
    jQuery('#royal_edit_title_view').show();
    jQuery('#royal_edit_price_view').show();
    jQuery('#royal_edit_desc_view').show();
});

点击royal_edit_button后，它会隐藏view部分并显示edit部分，而royal_edit_button_back则相反。

有没有办法简洁地做到这一点？我宁愿不必为每个元素重复相同的代码。

Answer 1

也许这会更好看：

$("#royal_edit_button").click(function () {        
    $('[id ^=royal_edit_][id $=edit]').show();
    $('[id ^=royal_edit_][id $=view]').hide();
}); 

$("#royal_edit_button_back").click(function () {
    $('[id ^=royal_edit_][id $=view]').show();
    $('[id ^=royal_edit_][id $=edit]').hide();
}

Answer 2

这是一个可能的解决方案：

如果您的html看起来像这样：

 <div class="royal-edit-section">
    <button id="royal_edit_button" class="active">Edit</button>
    <button id="royal_edit_button_back">View</button>
    <div class="edit-section selected royal-section">
        <label for="royal_edit_title_edit">Title:</label>
        <input type="text" id="royal_edit_title_edit" />
        <br />
        <label for="royal_edit_price_edit">Price:</label>
        <input type="text" id="royal_edit_price_edit" />
        <br />
        <label for="royal_edit_desc_edit">Description:</label>
        <input type="textarea" id="royal_edit_desc_edit" />
    </div>
    <div class="view-section royal-section">
        <p id="royal_edit_title_view" class="royal-view-item">Title: Sample title </p>
        <p id="royal_edit_price_view" class="royal-view-item"> Price: $10.00</p>
        <p id="royal_edit_desc_view" class="royal-view-item">Description: lorem ipsum dolor </p>
    </div>
</div>

JQuery的：

jQuery("#royal_edit_button").click(function () {
    jQuery('.active').removeClass('active');
    jQuery(this).addClass('active');
    jQuery('.edit-section').show();
    jQuery('.view-section').hide();
});     

jQuery("#royal_edit_button_back").click(function () {
    jQuery('.active').removeClass('active');
    jQuery(this).addClass('active');
    jQuery('.view-section').show();
    jQuery('.edit-section').hide();
});

Js fiddle：https://jsfiddle.net/cr6v6anz/

删除隐藏/显示不同元素的函数中的重复

2 个答案: