javascript - 单击时使用 jQuery 获取 HTML 内容

Question

我有一个简单的应用程序，需要单击一个 DIV，然后它会显示另一个需要更新其内容的 DIV。

大约有 40 个元素需要可点击并为每个元素显示正确的标签。

这是我需要发生的...

1. 用户点击一个 DIV (drag_me)
2. 然后显示信息框 DIV (flavour_box)
3. 默认词“Ingredients”被替换为“flavour_descrip”div 中的内容
4. 同时使用成分名称 (choc_label) 更新 'choc_flavour' div

数据来自数据库，所以我无法设置个人 ID。

我有一个与 draggable 类似的问题，但那是固定的，我已经尝试了一些类似于无济于事的事情。

这是可点击的 DIV(flavour_descrip 在 CSS 中设置为隐藏)

<li class="drag_me">
    <div>
        <img src="RASPBERRY.png" />
    </div>
    <div class="choc_label">
        Raspberries
    </div>
    <div class="flavour_descrip">
        Our description will appear here for the DB
    </div>
</li>

这是弹出框的 HTML...

<div id="flavour_box">
            <p class"flavour_description">Ingredients</p>
            <div class="flavour_add">Add To Mixing Bowl</div>
            </div>

这里是点击的 jQuery 片段(我已经注释掉了我开始重新调整的代码，但本质上我需要将 draggable.find 更改为可以工作的东西!)

 $(".drag_me").click(function () {
     //var htmlString = ui.draggable.find('.choc_label').html();
     //$('.choc2_flavour').text(htmlString);
     // update the description of the item
     //var htmlString = ui.draggable.find('.flavour_descrip').html();
     //$('.flavour_description').text(htmlString);
     // on click of jar make box pop
     $("#flavour_box").toggleClass("visible");
 });

有什么办法可以实现吗？

添加了额外的问题

现在我的问题已经解决了，我需要再执行一项任务。

在使用“this”获取详细信息的 div 中，我需要能够将更多元素传递给另一段脚本。

DIV“flavour_add”是可点击的，需要获取 flavor 名称以用于更新屏幕上的某些位并动态更新 URL。

<div id="flavour_box">
            <p class="flavour_name_label">Label</p>
            <p class="flavour_description">Ingredients</p>
            <div class="flavour_add">Add To Mixing Bowl</div>
            </div>

这是我的 jQuery，但使用“this”似乎不起作用

$(".flavour_add").click(function () {
         // hide the ingredient box
         $("#flavour_box").toggleClass("hidden");
         // show the continue box
         $("#added_box").toggleClass("visible");
         // get the flavour name
         var flavourLabel = $(this).find('.flavour_name_label').text();
         // update flavour URL
         var _href = $("a.to_step_3").attr("href");
         $("a.to_step_3").attr("href", _href + '&flavour=' + flavourLabel);
         //$("a.to_step_3").attr("href", _href + '&flavour=TestFromAdd');
         // update the mixing bowl list with the ingredient
         $('.choc2_flavour').text(flavourLabel);
         
     });

Answer 1

使用$(this)获取被点击元素的引用:

$(".drag_me").click(function () {
    var txt = $(this).find('.choc_label').text();

     $("#flavour_box > .flavour_descrip").text(txt);
     $("#flavour_box").toggleClass("visible");
 });

此外，您的 html 代码中有一个“错字”，替换为:

<p class"flavour_description">Ingredients</p>

通过:

<p class="flavour_description">Ingredients</p>