Question

我正在使用 api 调用 ajax，它会返回特定区域的可用教练列表。然后，我使用 div 循环在 foreach 中显示每位教练及其详细信息（名字、图片、电子邮件等）。每个 div 都有一个联系按钮，应该向教练发送电子邮件，因此为了获得教练电子邮件，我在每个教练详细信息中放置了一个隐藏的 span 元素，并为其分配了教练电子邮件的值.现在，当我尝试获取该跨度的值时，我总是会获取列表中第一个教练的值。我用于显示教练的 HTML 代码：

<!-- Single Coach Item -->
    <li class="product">
        <div class="post_item_wrap">
            <div class="post_featured">
                <div class="post_thumb">
                    <a href="#">
                        <img src="<?php echo './api/' . $coach["profile_picture"]; ?>" id="coach_image" alt="image" class="coach_img" />
                    </a>
                </div>
            </div>
            <div class="post_content">
                <!-- Hidden field below -->
                <span data-id="<?php echo $coach["email_address"]; ?>" class="hidden_fields coach_email"></span>


                <!-- Name and Bio -->
                <h3 class="coach_name"><?php echo $coach["first_name"] . " " . $coach["last_name"]; ?></h3>
                <span class="price description">
                    <span class="description"><?php echo $coach["coach_bio"]; ?></span>
                </span>
            </div>
        </div>
    </li>

触发 click 事件的按钮：

<span class="sc_button sc_button_square sc_button_style_2 sc_button_size_small contact_btn">
    <span class="cube flip-to-top">
        <span class="default-state sc_button_iconed none">
            <span>Contact Me</span>
        </span>
        <span class="active-state sc_button_iconed none">
            <span>Contact Me</span>
        </span>
    </span>
</span>

这就是我尝试通过 button 点击获取教练电子邮件的方式：

$(".contact_btn").click(function(e){
    var coach_email=$(".coach_email").data("id");  
    console.log(coach_email);
});

Answer 1

如果按钮与您的隐藏字段有一个共同的父级，您可以使用 closest 来获取这个共同的父级，并使用 find 进入您的隐藏字段。例如，如果您的按钮和隐藏字段与“product_div”类位于同一个 div 中：

$(".contact_btn").click(function(e){
    var coach_email=$(this).closest('.product_div').find('.coach_email').attr('data-id');  
    console.log(coach_email);
});

data-id 总是返回相同的值

1 个答案: