Как я могу это упростить?

Question

Так что я хочу упростить это в одну функцию, но я не знаю, как это сделать. Кажется, что я должен иметь возможность вытащить переменную из идентификаторов кликов, а затем использовать ее в скрытом селекторе id.

$(document).ready(function(){ 
     $(".hidden").animate({opacity:'0'}); 
    $("#click1").click(function(){ 
     $(".hidden").animate({opacity:'0'}); 
     $("#hidden1").animate({opacity:'0'}); 
     $("#hidden1").animate({opacity:'1'},"slow");  
     $("#hidden1").stop(); 
     }); 
    $("#click2").click(function(){ 
     $(".hidden").animate({opacity:'0'}); 
     $("#hidden2").animate({opacity:'0'}); 
     $("#hidden2").animate({opacity:'1'},"slow");  
     $("#hidden2").stop(); 
     }); 
    $("#click3").click(function(){ 
     $(".hidden").animate({opacity:'0'}); 
     $("#hidden3").animate({opacity:'0'}); 
     $("#hidden3").animate({opacity:'1'},"slow");  
     $("#hidden3").stop(); 
     }); 
    $("#click4").click(function(){ 
     $(".hidden").animate({opacity:'0'}); 
     $("#hidden4").animate({opacity:'0'}); 
     $("#hidden4").animate({opacity:'1'},"slow");  
     $("#hidden4").stop(); 
     }); 
    }); 


    <p id="click1">hover</p> 
    <p id="click2">hover</p> 
    <p id="click3">hover</p> 
    <p id="click4">hover</p> 

    <p id="hidden1" class="hidden">hidden 1</p> 
    <p id="hidden2" class="hidden">hidden 2</p> 
    <p id="hidden3" class="hidden">hidden 3</p> 
    <p id="hidden4" class="hidden">hidden 4</p> 

Answer 1

Что-то вроде

$(".hidden").css({opacity:'0'}); 
$("p[id^=click]").click(function(){ 
    var sufix = this.id.substring(5); 
    var el = $("#hidden" + sufix); 
    $(".hidden").stop().not(el).animate({opacity:'0'}); 
    el.animate({opacity:'1'},"slow"); 
}); 

Демо: Fiddle

Вы, если хотите более эффективное использование $('#click1, #click2, #click3, #click4') вместо $("p[id^=click]")

Answer 2

Вы можете использовать для, от 1 до 4. А потом внутри вас может быть

$("#click" + index).click(function(){ 
    $(".hidden").animate({opacity:'0'}); 
    $("#hidden" + index).animate({opacity:'0'}); 
    $("#hidden" + index).animate({opacity:'1'},"slow");  
    $("#hidden" + index).stop(); 
    }); 

Answer 3

дать все ваши hover-p в том же классе, например. clickable.

Я не проверял вызов index, но он должен работать так или подобное ...

$(document).ready(function(){ 
     $(".hidden").animate({opacity:'0'}); 
     $(".clickable").click(function(){ 
      $(".hidden").animate({opacity:'0'}); 
      var idx = "#hidden" + $(".clickable").index(this); 
      $(idx).animate({opacity:'0'}); 
      $(idx).animate({opacity:'1'},"slow");  
      $(idx).stop(); 
     }); 
}); 

редактировать: или использовать селектор Arun P Johny для дополнительных очков: p[id^=click]

Answer 4

расколоть теги в общий класс click и уникальный тег, скажем index. Затем прослушайте элементы общего класса, которые нужно щелкнуть в целом.

Внутри обратного вызова щелчка вы можете получить фактический элемент с нажатием, используя $(this). Из этого мы получаем тег index, используя attr('index'). Учитывая, что мы можем применять анимацию только к связанному скрытому объекту.

Поэтому сначала заберите все скрытые объекты с помощью $(".hidden"), а затем примените фильтр, чтобы найти элемент с правильным тегом index с .filter('[index="' + number + '"]').

HTML

<p class="click" index="1">hover</p> 
<p class="click" index="2">hover</p> 
<p class="click" index="3">hover</p> 
<p class="click" index="4">hover</p> 

<p class="hidden" index="1">hidden 1</p> 
<p class="hidden" index="2">hidden 2</p> 
<p class="hidden" index="3">hidden 3</p> 
<p class="hidden" index="4">hidden 4</p> 

JavaScript

$(document).ready(function(){ 

    $('.hidden').animate({ opacity:'0' }); 

    $('.click').click(function(){ 
     $('.hidden').animate({ opacity:'0' }); 

     var number = $(this).attr("index"); 

     $('.hidden').filter('[index="' + number + '"]') 
       .animate({ opacity:'0' }) 
       .animate({ opacity:'1' },"slow") 
       .stop(); 
    }); 
}); 

Более того, вы можете сократить код, приковав функции, выполняемые на одном объекте, как показано выше.

Адрес working fiddle, содержащий код, указанный выше. (Просто для удовольствия я тоже сделал styled version.)

Answer 5

Использовать атрибут data. Он прост в использовании, понятен и понятен.

<p class="click" data-id="1">hover</p> 
<p class="click" data-id="2">hover</p> 
<p class="click" data-id="3">hover</p> 
<p class="click" data-id="4">hover</p> 

<p class="hidden" data-id="1">hidden 1</p> 
<p class="hidden" data-id="2">hidden 2</p> 
<p class="hidden" data-id="3">hidden 3</p> 
<p class="hidden" data-id="4">hidden 4</p> 


<script> 
    function get_by_data(selector, data_string, data_value) { 
     return $(selector + '[data-' + data_string + '="' + data_value + '"]'); 
    } 
    $(document).ready(function() { 
     $('.hidden').animate({opacity: '0'}); 
     $('.click').click(function() { 
      var id = $(this).data('id'); 
      var $hidden = get_by_data('.hidden', 'id', id); 
      $('.hidden').animate({opacity: '0'}); 
      $hidden.animate({opacity:'1'},'slow').stop(); 
     }); 
    }); 
</script>