点击动态更改目标元素

为了让我的功能更具动态性，我希望根据用户点击哪个父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(); 
    }); 
};

我要什么使用另一种功能以填充变量，但这与重写该函数三次相同。任何帮助感谢！

来源

2016-01-13 mieradi

你能解释一下你想达到什么吗？这听起来像是你在复杂化一个相对简单的问题。另外，看到你的HTML可能会有所帮助。 –

呃，其中之一，你不会做'$（'target'）'，你想'$（目标）'。你为target创建了一个变量，所以你需要将它作为一个参考，而不是一个字符串。你的'??'位取决于你想要做什么（我们不知道） – Draco18s

@RoryMcCrossan我想要填充变量以基于哪个组合是动画，显示和隐藏点击。所以，如果第一个投资组合被点击，那么该函数就会定位它的类。如果第二个被点击，它也是如此，等等。 – mieradi

要逐字做到在时装要做到这一点，利用.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(); 
    }); 
};

布拉沃达到更清洁的代码，但是有即使更干净的方式去！考虑组织您的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泛型类，并与内容，按钮和覆盖相同。

来源

2016-01-13 16:25:36

这太好了。和我尝试的方法非常类似。谨慎地阐述如何使它更清洁？这就是我所追求的！ – mieradi

我把我的陈述失序了，编辑。我给出的最后一个例子是做事情的典型方式。祝你好运！ –

太棒了。非常感激！ – mieradi

点击动态更改目标元素

回答

相关问题