Question

我有一个带有多个触发点的人体图。我想要一个装有标题和副本的独特盒子，以便在每个触发点悬停时显示。我已经逐个编写了每个函数，但是我想把它写得更清洁，更简洁。这是我到目前为止所做的：

$(".point-one").hover(
function() {
    $("#patient-body").animate({opacity: 0.3});
    $(".trigger-point").animate({opacity: 0.1});
    $("#service-one").animate({opacity: 1.0});
},
function() {
    $("#patient-body").delay(100).animate({opacity: 1.0}, "fast");
    $(".trigger-point").delay(100).animate({opacity: 1.0}, "fast");
    $("#service-one").delay(100).animate({opacity: 0}, "fast");
});


$(".point-two").hover(
    function() {
        $("#patient-body").animate({opacity: 0.3});
        $(".trigger-point").animate({opacity: 0.1});
        $("#service-two").animate({opacity: 1.0});
    },
    function() {
        $("#patient-body").delay(100).animate({opacity: 1.0}, "fast");
        $(".trigger-point").delay(100).animate({opacity: 1.0}, "fast");
        $("#service-two").delay(100).animate({opacity: 0}, "fast");
    }
);

如何更有效地写这个？

适用于此的HTML是：

                            <a href="#" class="trigger-point point-one">Shoulder</a>
                        <div id="service-one" class="fpt-service">
                            <h3>Shoulder</h3>
                            <p>We treat arthritis, dislocation, frozen shoulder, tendinitis, rotator cuff tears, post surgical arthroscopy, and other conditions that inhibit range of motion.</p>
                        </div>

                        <a href="#" class="trigger-point point-two">Back</a>
                        <div id="service-two" class="fpt-service">
                            <h3>Back</h3>
                            <p>Back conditions that we treat include arthritis, herniated discs, ligamentous strains, lumbar radiculopathy, rhombois and lower trapezius strain, muscular strains, osteoporosis, scoliosis, spinal stenosis, T4 syndrome and upper back stiffness.</p>
                        </div>

Answer 1

如何使用service-1，service-2等id。然后创建一个构造这些函数的for循环，并为您附加这些事件。有点像：

for (i = 0; i < number_service_points; i++) {
    $(".point-" + i).hover(
        function....
    );

虽然我认为理想的解决方案是使用整个事物的类和DOM遍历来查找相关的服务信息。这样您就可以将.hover事件附加到所有.points，然后使用$(this).next('div')或其他内容来查找关联的元素。这是我认为最干净的方式。

Answer 2

为A标记添加一个'title'属性，该属性与您希望它显示的DIV的'id'相匹配。

示例Javascript：

    $(".trigger-point").hover(
function() {

    var id = $(this).attr( 'title' );

    $("#patient-body").animate({opacity: 0.3});
    $("#" + id).animate({opacity: 1.0});
    $(this).animate({opacity: 0.1});

},
function() {

    var id = $(this).attr( 'title' );

    $("#patient-body").animate({opacity: 1}, "fast");
    $("#" + id).animate({opacity: 0}, "fast");
    $(this).animate({opacity: 1.0}, "fast");

});

示例HTML：

<a title="shoulder" href="#" class="trigger-point">Shoulder</a>
<div id="shoulder" class="fpt-service">
<h3>Shoulder</h3>
<p>We treat arthritis, dislocation, frozen shoulder, tendinitis, rotator cuff tears, post surgical arthroscopy, and other conditions that inhibit range of motion.</p>
</div>

<a title="back" href="#" class="trigger-point">Back</a>
<div id="back" class="fpt-service">
<h3>Back</h3>
<p>Back conditions that we treat include arthritis, herniated discs, ligamentous strains, lumbar radiculopathy, rhombois and lower trapezius strain, muscular strains, osteoporosis, scoliosis, spinal stenosis, T4 syndrome and upper back stiffness.</p>
</div>

Answer 3

假设您的HTML始终位于<a> div之前的.fpt-service，您可以使用以下一个代码段来处理所有情况：

$('.trigger-point').hover( function(){ // identify by class, not ID
  $('#patient-body').animate({opacity: 0.3});
  $(this)
    .animate({opacity: 0.1});
    .nextAll('.fpt-service:first') // should walk to the correct div if present
    .animate({opacity: 1.0});
}, function(){
  $('#patient-body').delay(100).animate({opacity: 1.0}, "fast");
  $(this)
    .delay(100).animate({opacity: 1.0}, "fast")
    .nextAll('.fpt-service:first')
    .delay(100).animate({opacity: 0}, "fast");
});

Answer 4

您可以将这些匿名悬停功能转换为命名函数，以便进行更简单的维护并组合一些选择器。另外，我假设每个服务div都将遵循页面布局中的触发链接，以便我们可以使用$(this).next('div')在悬停函数中引用它们：

var pointIn = function (e) {
        $('#patient-body').animate({ opacity: 0.3 });
        $('.trigger-point').animate({ opacity: 0.1 });
        $(this).next('div').animate({ opacity: 1.0 });
    },
    pointOut = function (e) {
        $('#patient-body, .trigger-point').delay(100).animate({ opacity: 1.0 }, 'fast');
        $(this).next('div').delay(100).animate({ opacity: 0.0 }, 'fast');
    };

$('.point-one, .point-two').hover(pointIn, pointOut);

参见演示→http://jsfiddle.net/KSqeF/2/

多个悬停＆amp;使用jQuery动画实例

4 个答案: