Question

我想单击一个元素并从另一个与它无关的div中获取ID。

我尝试过：

$(".map_flag").on("click",function(){
    var objective = ($(this).attr("data_modal"));

    $("#" + objective).fadeIn(300, function(){
        $("#" + objective).find(".modal_content").fadeIn(300);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="map_flag" data_modal="map_1"> 
    <img src="img/image_1.png" alt="image one" >
</button>

<div id="map_1">
    <p class="modal_content">place holder</p>
</div>

Answer 1

我认为您需要的是这样的

<button class="map_flag" data-modal="map_1"> 
    <img src="img/image_1.png" alt="image one" >
</button>

<div id="map_1">
    <p class="modal_content">place holder</p>
</div>

然后使用JavaScript

$(".map_flag").on("click",function(){

    // You should use data-* attributs as jQuery has a special function
    // .data("name") that obtains the value of property data-name for example
    var objective = $(this).data("modal");

    $("#" + objective).fadeIn(300, function(){
        $("#" + objective).find(".modal_content").fadeIn(300);
    });
});

Answer 2

首先，自定义属性必须以data-而不是data_开头（注意破折号/下划线）。

然后

$("#" + objective).fadeIn(300, function(){
    $("#" + objective).find(".modal_content").fadeIn(300);
});

首先在$('#map_1')中淡入，然后在完成后，在$('#map_1 .modal')中淡入。不确定是否打算这样做，但是如果#map_1元素没有其他子元素，则可能只希望淡入一次。

对于其他情况，您的代码应该可以正常工作。

Answer 3

我对我的jquery技巧不是很自信，但是在淡入之前您不需要“淡出”吗？ [https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein]

单击一个div并获取另一个div的ID

3 个答案: