Динамическое изменение целевых элементов при нажатии

Question

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

Итак, это предназначено для первого раздела портфеля, но будет три, и я пытаюсь использовать одну и ту же функцию для каждого.

Вот что я начал с-

HTML

<div class="portfolio-one"> 

    <h1 class="portfolio-one__overlay">heading</h1> 

    <div class="portfolio-one__content"> 
    <button class="icon-times "></button> 
    <h1 class="portfolio__heading">heading</h1> 
    <p class="portfolio__description">Lorem</p> 
</div> 
</div> 

JQuery

function showContent(){ 
    $('.portfolio-one').on('click', function(event) { 
     $('.portfolio-one__content').animate({ 
      left: "5", 
      height: "100%" 
     }, 700, "linear"); 
     $('.portfolio-one__content').show(); 
     $('.portfolio-one__content button').show(); 
     $('.portfolio-one__overlay').hide(); 
    }); 
}; 

И то, что я хотел бы закончить с-

var target = ??; 
var content = ??; 
var button = ??; 
var overlay = ??; 

function showContent(){ 
    $('target').on('click', function() { 
     $('content').animate({ 
      left: "5", 
      height: "100%" 
     }, 700, "linear"); 
     $('content').show(); 
     $('button').show(); 
     $('overlay').hide(); 
    }); 
}; 

Я собирался использовать другую функцию чтобы заполнить переменные, но это похоже на повторное создание функции три раза. Любая помощь ценится!

Answer 1

Чтобы сделать это буквально в моде вы хотите сделать это, используйте .attr('class'), чтобы получить имя вашего класса в виде строки, и использование конкатенации на нем:

function showContent(){ 
$('.portfolio-one').on('click', function(event) { 
    var className = $(this).attr('class'); 
    $('.' + className + '__content').animate({ 
    left: "5", 
    height: "100%"}, 700, "linear"); 
     $('.' + className + '__content').show(); 
     $('.' + className + '__content button').show(); 
     $('.' + className + '__overlay').hide(); 
    }); 
}; 

Bravo для достижения более чистого кода, но есть даже более чистые пути! Рассмотрите возможность организации вашего HTML таким образом, чтобы содержимое, кнопка и наложение являлись элементами-потомками (, например,) элемента, который классифицирован .portfolio-xyz. Потому что тогда вы можете использовать селекторы потомков, чтобы сделать ваши ставки:

function showContent(){ 
$('.portfolio-any').on('click', function(event) { 
    $(this).find('.portfolio-content').animate({ 
    left: "5", 
    height: "100%"}, 700, "linear"); 
     $(this).find('.portfolio-content').show(); 
     $(this).find('.portfolio-button').show(); 
     $(this).find('.portfolio-overlay').hide(); 
    }); 
}; 

Чтобы сделать выше, вы бы дать всем портфели общий класс, как .portfolio-any, и то же самое с содержанием, кнопок и накладками.