Question

目前我有这个JS代码：

$('.tile').on('click', function() {    
    $(".tile").addClass("flipOutX");
    setTimeout(function() {
        $('.metro .tile-area-darkCrimson').css('backgroundColor','#4c7fb5');
        $('.metro .tile-area .user-id').css('backgroundColor','#4c7fb5');
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("company-overview.html");
    }, 2000);
});

我还有一些HTML <a>是按钮，它们都叫做tile

我想加载href中定义的特定<a>，如下所示，其中有两个：

<a class="tile double bg-tile7color animated seven flipInX" data-click="transform">
    <div class="tile-content image">
        <div class="padding10">
            <h2 class="fg-white ntm">Cost</h2>
            <p class="fg-white ntm">Pricing and Proposals</p>
        </div>
        <div class="brand">
            <div class="label"></div>
        </div>
    </div>
</a>

<a class="tile bg-tile8color animated eight flipInX" data-click="transform">
    <div class="tile-content icon">
        <span>
            <img src="images/mthc/referrals.png">
        </span>
    </div>
    <div class="brand">
        <div class="text-center padding10 ntp">
            <p class="fg-white">Referrals</p></div>
        </div>
    </a>

如何更改JS以加载href中的所有内容，而不是当前在函数的.load()部分中指定的内容？目前正在加载company-overview.html。在这种情况下，我还需要对按钮进行独特的颜色更改，以便有任何方法可以将此更改集成到s中吗？

Answer 1

只需将load("company-overview.html")替换为.load($(this).attr('href')即可引用所点击的当前/目标href的{{1}} attribute：

.tile

Answer 2

您可以使用点击处理程序中的this关键字来引用所点击的元素。从那里你可以检索href属性：

$('.tile').on('click', function(e) {
    e.preventDefault();    
    $(".tile").addClass("flipOutX");
    setTimeout(function() {
        $('.metro .tile-area-darkCrimson, .metro .tile-area .user-id').css('backgroundColor','#4c7fb5');
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load($(this).prop('href'));
    }, 2000);
});

单击元素后的load（）特定href

2 个答案: