Question

我有一个附加了onmousedown =“toggleMore（this）”的div。它涉及一个功能：

function toggleMore(divid){

alert(divid.id);
$('#'+divid.id).html('less');

}

这会产生正确的潜水ID。但是该函数不会改变div的html。

我玩过这个但是无法让它起作用

有人可以帮忙吗？

感谢

Answer 1

根据你在这个答案中的评论，我可以想到两种简单的方法来做到这一点。

第一种方法是使用html data- *属性和JQuery .data（）函数。

＆＃13;

$("#DivOne").on("click", function()
{
    var targetID = $(this).data("target-id");
    
    $("#" + targetID).text("I told you so...");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="DivOne" data-target-id="DivTwo">
    If click here
</div>

<div id="DivTwo">
    This text will change
</div>

＆＃13;

但是，如果你需要像accordion effect这样的东西，你可以采取以下方式：

＆＃13;

// First we hide the content of every block
$(".block .content").hide();

// Then, if the user click in a title
$(".block .title").on("click", function()
{
    // We hide the contents
    $(".block .content").hide();
  
    // And find the content div within the parent of the clicked title
    $(this).parent().find(".content").show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="block">
    <div class="title">Title A</div>
    <div class="content">Content A</div>
</div>

<div class="block">
    <div class="title">Title B</div>
    <div class="content">Content B</div>
</div>

<div class="block">
    <div class="title">Title C</div>
    <div class="content">Content C</div>
</div>

＆＃13;

当然，您可以使用data- *属性来混合这些方法来定位多个元素。

原始回答

你不需要从元素中捕获id ...
如果你将整个元素传递给它，JQuery会为你完成这项工作。

＆＃13;

function onMouseDown(element)
{
    $(element).text("Thank you!");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div onmousedown="onMouseDown(this)">
    Click me
</div>

＆＃13;

另一种方法是使用＆＃34; pure ＆＃34; JQuery为你处理点击，如下所示：

＆＃13;

var div = $("#DivID");
div.on("mousedown", function(event)
{
    div.text("Thank you!");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="DivID">
    Click me
</div>

＆＃13;

函数不会按预期更新HTML

1 个答案: