javascript - 获取标题文本的值(HTML,CSS)

Question

现在我必须单击订阅按钮并获取计划名称的值，即白金或黄金。

HTML:

<div role="tabpanel" class="tab-pane active col-md-9" id="home">
    <div class="col-sm-4">
        <table class="table table-bordered Pricing-Plan" style="background: #E8FFD2;">
            <tr>
                <th style="background: #60D760;">
                    <h3 class="Plan">Platinum</h3>
                    <p>AGENCIES & MARKETING TEAMS</p>
                </th>
            </tr>
            <tr>
                <td>
                    <p class="table-price">$299</p>
                    <span>per month</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="btn btn-success pricing-button">Subscribe</span>
                </td>
            </tr>
        </table>
    </div>
    <div class="col-sm-4">
        <table class="table table-bordered Pricing-Plan">
            <tr>
                <th style="background: #22D3FF;">
                    <h3 class="Plan">Gold</h3>
                    <p>CONSULTANTS & SMALL BUSINESSES</p>
                </th>
            </tr>
            <tr>
                <td>
                    <p class="table-price">$199</p>
                    <span>per month</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="btn btn-info pricing-button">Subscribe</span>
                </td>
            </tr>
        </table>
    </div>
</div>

jQuery:

$(function() {
    $(".pricing-button").click(function() {
        alert($(this).find('.Pricing-Plan Plan').text());
        //$('.Plan').val(function () {
        //    $(this).text();
        //});
    });
});

我需要在点击订阅按钮时获得价格和计划名称，我希望有人能帮我解决这个问题。

Answer 1

你可以通过稍微修改你的代码来获得它:

$(".pricing-button").click(function() {
    alert($(this).parents('table').find('.Plan').html());
});

DEMO

或

您可以将自定义属性 data-plan="Plantinum/Gold" 添加到您的定价按钮，如下所示:

<span class="btn btn-info pricing-button" data-plan="Gold">Subscribe</span>

并获取属性值如下:

$(".pricing-button").click(function () {
    alert($(this).attr('data-plan'));
});

DEMO