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

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

Есть ли способ записать следующий код в функцию 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>

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

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

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

Спасибо Натан

Источник

5 ответов

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

$('.button').click(...)
Источник

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

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);
  });
}
Источник

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

<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, и я буду следить за этим.

Источник

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

<script>
var i=1;

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

</script>
Источник

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

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

  2. Привязать к родителю #click set, функция, которая (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 в одном контейнере, необходимо внести некоторые незначительные изменения. Вам нужно собрать все элементы в коллекцию, к которой можно получить доступ во время обработчика кликов, чтобы все "конкурирующее" содержимое можно было идентифицировать и скрыть.

Источник
Другие вопросы по тегам