Question

我有css类，如.blue，.red等定义背景颜色。我想为包含类'fancybox-title'的div添加特定的类，具体取决于属于fancybox的id

<div class="fancybox-skin">
    <div class="fancybox-title fancybox-title-inside-wrap">Welcome</div>  //here I want to add class, for example '.blue'...
    <div class="fancybox-outer">
        <div class="fancybox-inner">
            <div style="display: block;" id="login-register-fancybox"></div>  //depending on the ID from this line of code
        </div>
    </div>
</div>

我内心有几次尝试：

$('.fancybox').fancybox({
    'beforeLoad': function(){

    }
});

包括尝试通过ID，交换机等查找元素，但脚本开始看起来很大而且凌乱而不给我想要的结果。我相信有更简单的方法来实现这一点，只是无法弄明白。有人可以帮忙吗？

Answer 1

我将为您提供两种解决方案：

首先：问题的答案＆＃34;取决于属于fancybox的ID＆＃34;使用switch语句并使类硬编码。 this包含属性content：已加载的内容。通过将内容包装在jQuery对象中，我们可以获得内容的id。

第二：为了使你的代码更通用，我在你的HTML data-title-class中添加了一个新属性，这个属性的值被设置为添加到fancybox标题的类中。

两个解决方案都使用回调afterShow，因为在早期的回调中，fancybox-title尚未添加。

＆＃13;

$('.fancybox').fancybox({ afterShow: function()
{
    // First solution, based on id of content.
    var titleClass;
    switch($(this.content).attr('id'))
    {
        case 'register':
            titleClass = 'blue';
            break;
        case 'login':
            titleClass = 'red';
            break;
    }
    $('.fancybox-title span').addClass(titleClass);
    
    //Second solution, based on data attribute.    
    if($(this.content).attr('data-title-class'))
    {
        $('.fancybox-title span').addClass($(this.content).attr('data-title-class'));
    }
} });

＆＃13;

#register, #login { display: none; }
.blue { background-color: #00f !important; }
.red { background-color: #f00 !important; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

<div id="register">
    registering...
</div>
<div id="login" data-title-class="red"><!-- Second solution -->
    logging in...
</div>

<a href="#register" title="register now!" class="fancybox">register</a><br />
<a href="#login" title="login now!" class="fancybox">login</a>

＆＃13;

Answer 2

您可以使用fancybox上的$(this).fancybox('instance')定位点击event的实例。它会给你一个具有许多属性的对象。其中一个是元素，你可以在其上调用parentNode或任何你需要的东西。这样会给你调用a的{{1}}元素的父ID：

fancybox

Fancybox - 根据div id为标题添加类

2 个答案: