Переключая кнопки на кнопку


При нажатии кнопки, следующие должны быть выполнены:

  1. Все братья и сестры нажали кнопку Получить включить
  2. Все edit_button вам переключаться, кроме edit_button в тот же промежуток, как нажали кнопку (Примечание: В основе edit_button может быть таким же, как нажата кнопка)

JavaScript-код работает так, как я хочу его, но я интересно, если есть другой лучший способ для достижения второго требования.

Примечание: save_button и cancel_button скрыты при первой загрузке.

$(function() {
  $('.edit_button, .save_button, .cancel_button').click(function() {
    $(this).toggle();
    $(this).siblings('button').toggle();
    $('div#personal_info').find('button.edit_button').not($(this).parent().find('button.edit_button')).toggle();
  });
});
<div id="personal_info">
  <div id="section_1">
    <span><button class="edit_button">Edit</button><button class="cancel_button">Cancel</button><button class="save_button">Save Changes</button></span>
  </div>
  <div id="section_2">
    <span><button class="edit_button">Edit</button><button class="cancel_button">Cancel</button><button class="save_button">Save Changes</button></span>
  </div>
  <div id="section_3">
    <span><button class="edit_button">Edit</button><button class="cancel_button">Cancel</button><button class="save_button">Save Changes</button></span>
  </div>
</div>



229
3
задан 25 июля 2011 в 11:07 Источник Поделиться
Комментарии
1 ответ

Селектор для всех edit_buttons может быть выражена как один селектор $('див#personal_info кнопку.edit_button').

Я испытываю желание переписать код, чтобы использовать возможности закрытия в кэше селектор значений, например

// Iterate using each to define cached values for selectors within a 
// closure scope
$('.edit_button, .save_button, .cancel_button').each(function() {
var button = $(this);
// select all elements that need be toggled on click
var toggled = $([
button,
button.siblings('button'),
$('div#personal_info button.edit_button').
not(button.parent().find('button.edit_button'))
]);
// toggle each element separetely on click as the first element in a selector
// defines the target visiblity of a no parameter .toggle()
button.click(function() {
toggled.each(
function() {
$(this).toggle();
});
});
});

Преимущество его заключается в том, что нужно меньше пересекая это. К сожалению, метод переключения сработало не совсем так, как я себе представлял, когда есть и скрытые, и показаны элементы в селекторе, когда с помощью jQuery 1.6.2.

Выше код доступен через jsFiddle

От обслуживания/точки зрения чистоты я немного настороженно, как этот кусок кода, объединяет интересы


  1. Скрывая все изменить действия

  2. Показывая все действия по редактированию

  3. Отображение сохранить и отмена действия для конкретного редактирования действий

  4. Скрывая сохранить и отмена действия для конкретного редактирования действий

Результатом всех этих целей приводит в изумление, что выше, чем минимально возможные. Я не знаю, что хорошее имя для этой функции будет?

Также как и где находятся обработчики событий для события onclick функции .save_button и .cancel_button определенными?

2
ответ дан 26 июля 2011 в 07:07 Источник Поделиться