Question

我是Jquery的新手需要得到像图像映射这样的东西 selected image

选择并取消选择了2张图片。在此所选图片的顶部有3张图片（facebook，linkedin，email），当用户在所选图片的特定部分上选择时，如果在Facebook上，那么它应该重定向到链路）。

如何重定向到该特定链接，任何人都可以指导我如何操作？

<div class='opt-slider-person selected opt-slider-cont' data-id="1">
    <div id="team">
        <ul>
            <li class="facebook">
              <a href="https://www.twitter.com" 
                 target="_blank" title="facebook"></a>
           </li>
            <li class="linkedin">
              <a href="https://www.linkedin.com" 
                 target="_blank" title="linkedin"></a>
            </li>
            <li class="email">
             <a href="mailto:?subject=News&amp;" 
                target="_blank" title="email"></a>
            </li>
        </ul>
    </div>
</div>

<div class='opt-slider-person opt-slider-cont' data-id="2"></div>

Jquery的：

 $(".opt-slider-person").click(function () {
     $(".opt-slider-person").removeClass('selected');
     $(this).addClass('selected');

}）;

编辑：基本上我有一个类似下面的div，我想从data-id =“1”开始在每个div中添加3个链接。像我上面提到的那些东西。这些链接应该只出现在我点击data-id =“1”而不是在其他id中。我能做到这一点吗？

<div class="opt-slider">
                <div class="inner">

                  <div class='opt-slider-person selected opt-slider-cont' data-id="1"> </div>
                  <div class='opt-slider-person opt-slider-cont' data-id="2"> </div>
                  <div class='opt-slider-person opt-slider-cont' data-id="3"> </div>
                  <div class='opt-slider-person opt-slider-cont' data-id="4"> </div>
                  <div class='opt-slider-person opt-slider-cont' data-id="5"> </div>
                  <div class='opt-slider-person opt-slider-cont' data-id="6"> </div>
                  <div class='opt-slider-person opt-slider-cont' data-id="7"> </div>
                </div>
              </div>

以下css： -

<style>
.opt-slider {
    overflow: hidden;
    position: relative;
    height: 190px;
    margin: 0;
}
.opt-slider .inner {
    position: absolute;
    height: 190px;
    left: 0;
}
.opt-slider-cont {
    float: left;
}
.opt-slider-person {
    widtH: 200px;
    height: 188px;
    background-image: url(../../Content/images/team_unselected.png);
}
.opt-slider-person.selected {
    background-image: url(../../Content/images/team_selected.png);
}

.opt-slider-person.selected a
{
    position: absolute;
            width: 40px;
            height: 40px;
            text-indent: -1000em;
}

基于以下代码尝试修改：

$('.opt-slider-person').filter(function () {   // Selects list of elements
        $(this).data("id") === 1;                 // Filters elements by data-id
    }).click(function () {                         // Binds an event listener
        $(this).parent()                          // Selects siblings and itself...
       .children()                        // by selecting children of parent
       .html('<div id="team"><ul><li class="facebook"><a href="https://www.facebook.com" target="_blank" title="facebook"></a></li><li class="linkedin"><a href="https://www.linkedin.com" target="_blank" title="linkedin"></a></li><li class="email"><a href="mailto:?subject=News&amp;" target="_blank" title="email"></a></li></ul></div>');   // Inserts the links
    });

Answer 1

以下是您的步骤：

触发点击事件
添加链接

尝试这样的事情：

$('.opt-slider-person').filter(function() {   // Selects list of elements
    $(this).data("id") === 1;                 // Filters elements by data-id
}).click(function() {                         // Binds an event listener
    $(this).parent()                          // Selects siblings and itself...
           .children()                        // by selecting children of parent
           .html(/* link code goes here*/);   // Inserts the links
});

如果我不理解您的要求，请随时告诉我，以便我更新答案。

选择图像映射链接jquery

}）;

1 个答案: