如何在jquery中获取h3标签文本值? [英] How can i get h3 tag text value in jquery?

问题描述

我编写以下代码来生成<h3>标签:

I write the following code to generate <h3> tags:

@foreach (var item in ViewBag.adslList)
{
    <div class="flip">
        <div class="front">
            <h3>@item.Count</h3>
        </div>
        <div class="back">
            <h3>@item.Price</h3>
            <button type="button" id="buyBTN"  name=@item.Count class="btn btn-success">خرید</button>
        </div>
    </div>
}

我想在此jquery代码中写一些东西:

I want to write some thing in this jquery code:

$(document).ready(function () {
    $("#buyBTN").click(function () {
        ....
    });
});

想要在用户单击buyBTN时显示<h3> @item.Count和@item.Price.我该如何为此目的编写代码?

want to when user click on the buyBTN show that <h3> @item.Count and @item.Price. How can i write code for that purpose?

推荐答案

您的foreach循环正在生成无效的html(<button>元素中的id属性重复.请改用类名，以便可以使用相对选择器

Your foreach loop is generating invalid html (duplicate id attributes in the <button> element. Use a class name instead so you can use relative selectors

@foreach (var item in ViewBag.adslList)
{
    <div class="flip">
        <div class="front">
            <h3>@item.Count</h3>
        </div>
        <div class="back">
            <h3>@item.Price</h3>
            <button type="button" class="buyBTN" name=@item.Count class="btn btn-success">خرید</button>
        </div>
    </div>
}

$('.buyBTN').click(function () {
    var container = $(this).closest('.flip');
    // Get the text in the h3 elements
    var count = container.children('.front').children('h3').text();
    var price = container.children('.back').children('h3').text();
});

或者，您可以使用data-*属性将值存储在<button>元素中

Alternatively you can store the values in the <button> element using data-* attributes

<button type="button" class="buyBTN" data-count="@item.Count" data-price="@item.Price" name=@item.Count class="btn btn-success">خرید</button>

并使用

$('.buyBTN').click(function () {
    var count = $(this).data('count');
    var price = $(this).data('price');
});

这篇关于如何在jquery中获取h3标签文本值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！