Как очистить следующий код в функции if then

Question

Вот нубский вопрос: -).

Есть ли способ записать следующий код в функцию if then, чтобы он считал, не добавляя больше записей?

<script>
$("#click1").click(function () {
$("#parentshowhide div:not(#show1)").hide();
$("#show1").show("fast");
});

$("#click2").click(function () {
$("#parentshowhide div:not(#show2)").hide();
$("#show2").show("fast");
});

$("#click3").click(function () {
$("#parentshowhide div:not(#show3)").hide();
$("#show3").show("fast");
});

$("#click4").click(function () {
$("#parentshowhide div:not(#show4)").hide();
$("#show4").show("slow");
});
</script>

Заранее спасибо !!

---

Извините, что вводите вас в заблуждение в коде. «Быстрая» и «медленная» части кода должны быть одинаковыми. Так что либо все быстро, либо все медленно, это не обязательно должно быть переменной.

Сейчас я опробую все предложения.

Спасибо, Nathan

Answer 1

Если вы видите, что используете #click1, #click2, #click3 и т. Д., Вы должны подумать, что все эти элементы имеют одинаковое поведение. Есть слово для этого с точки зрения разметки, они все принадлежат одному и тому же классу . Так что, если вы зададите #clicki класс .button и отработаете относительную HTML-структуру, вы можете сделать это за один раз:

$('.button').click(...)

Answer 2

Действительно, есть.Это все о поиске общих вещей в коде и их повторного использования.Добавьте к объекту конфигурации, как вам нужно.Это решение будет делать именно то, что вы хотите, но вам нужно будет лучше использовать всю мощь селекторов, принимая к сведению ответ Дэвина.

var config = {
  1: 'fast',
  2: 'fast',
  3: 'fast',
  4: 'slow'
};

for (var key in config) {
  var value = config[key];

  $("#click" + key).click(function () {
    $("#parentshowhide div:not(#show" + key + ")").hide();
    $("#show" + key).show(value);
  });
}

Answer 3

Хорошо, вот самый простой способ сделать это, я верю.

<script type="text/javascript">
    $(document).ready(function(){
        // Add a class of 'toggle' to the links
        $("a.toggle").click(function(){
            // Create a variable to know which one we're hiding / showing
            var number = toInt($(this).attr("id").replace("click",""));
            $("#parentshowhide div:not(#show" + number)).hide();
            $("#show" + number).show("fast");
        })
    })
</script>

Это не проверено, но логика логична.Любые проблемы, пожалуйста, создайте jsFiddle, и я буду следить за этим.

Answer 4

Похоже, у вас там есть вкладка.Если все #click1 - #clickX имеют одного и того же родителя, вы можете сделать что-то вроде этого:

1. Убедитесь, что у каждого из #click1 - #clickX есть свойство HTML (напримерHREF), у которого есть идентификатор связанного элемента, который не должен быть скрыт.Затем передайте всем #click1 - #clickX общий класс CSS.

2. Привязать к родителю набора #click функцию, которая (1) скрывает все связанныесодержимое по идентификатору (используя HREF или другое свойство);а затем (2) показывает содержимое, идентифицированное по нажатому элементу.

Вот некоторые JS (предполагая, что #click1 является A, и что все #clickX находятся внутри DIV с ".tabset"):

$('a.clickable', $('.tabset')).live('click', function(event) {
   // hide all linked content
   var jThis = $(this);
   var jSet = jThis.closest('.tabset');
   jSet.find('a.clickable').each(function() {
      $('#' + $(arguments[1]).attr('href')).hide();
   });
   // show this one piece of content
   $('#' + jThis.attr('href')).show();

   // prevent further handling
   event.preventDefault();
   return false;

});

Этот код предназначен для этой разметки:

<div class="tabset">
   <a class="clickable" href="#show1">View #1</a>
   <a class="clickable" href="#show2">View #2</a>
   ...
   <a class="clickable" href="#showX">View #X</a>
</div>

<div id="#show1"> [stuff here] </div>
<div id="#show2"> [more stuff] </div>
<div id="#showX"> [stufffffff] </div>

Если вы не можете (или не хотите) иметь все #элементы clickX в одном контейнере, некоторые незначительные изменения должны быть сделаны.Вам нужно собрать все элементы в коллекцию, к которой можно получить доступ во время обработчика кликов, чтобы все «конкурирующее» содержимое можно было идентифицировать и скрыть.

Answer 5

хм, я не проверял, но вы можете попробовать следующее:

<script>
var i=1;

while($("#click"+i)){
    $("#click"+i).click(function () {
        $("#parentshowhide div:not(#show"+i+")").hide();
        $("#show"+i).show("slow");
    }
    i++;
}

</script>