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的通用类，并与内容，按钮和叠加层相同。

点击

1 个答案: