在jQuery中如何从父级获取数据属性

时间:2020-09-11 04:03:10

标签: jquery

这是我的HTML:

<div class="container" data-step="a_1">
    <div class="mx-auto col-10">
        <h1 class="font-weight-light ls1">Question 1</h1>
        <div class="row">
            <div class="col-xl-6 col-sm-10 mb-5">
                <div data-next="item1">
                    <input id="radio-1" class="radio-style" type="radio" name="question1[]" value="value1" class="required">
                    <label for="radio-1" class="radio-style-1-label">Item 1</label>
                </div>
                <div data-next="item2">
                    <input id="radio-2" class="radio-style" type="radio" name="question1[]" value="value2" class="required">
                    <label for="radio-2" class="radio-style-1-label">Item 2</label>
                </div>
            </div>
        </div>
        <a href="#" class="button button-border font-weight-medium button-circle" data-action="validate-step">Next »</a>
    </div>
</div>

在点击Next »时,我希望能够获得选中元素的data-next

这是我尝试过的:

$('a[data-action="validate-step"]').click(function(event) {
    event.preventDefault();

    item = $(this).closest('.container').data('step');

    name  = $(item).prop('checked').closest('div').data('name');
    steps = $(item).prop('checked').closest('div').data('steps');
    next  = $(item).prop('checked').closest('div').data('next');

    alert(name);
    alert(steps);
    alert(next);    
});

但是我有这个错误:

TypeError: undefined is not an object (evaluating '$(item).prop('checked').closest')

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

将父容器保存在变量中,然后使用:checked导航到选中的子复选框,然后您可以转到其父容器并检查其数据:

$('a[data-action="validate-step"]').click(function(event) {
    event.preventDefault();
    const container = $(this).closest('.container');
    const checkbox = container.find(':checked');
    const checkboxParent = checkbox.parent();
    console.log(checkboxParent.data('next'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" data-step="a_1">
    <div class="mx-auto col-10">
        <h1 class="font-weight-light ls1">Question 1</h1>
        <div class="row">
            <div class="col-xl-6 col-sm-10 mb-5">
                <div data-next="item1">
                    <input id="radio-1" class="radio-style" type="radio" name="question1[]" value="value1" class="required">
                    <label for="radio-1" class="radio-style-1-label">Item 1</label>
                </div>
                <div data-next="item2">
                    <input id="radio-2" class="radio-style" type="radio" name="question1[]" value="value2" class="required">
                    <label for="radio-2" class="radio-style-1-label">Item 2</label>
                </div>
            </div>
        </div>
        <a href="#" class="button button-border font-weight-medium button-circle" data-action="validate-step">Next »</a>
    </div>
</div>

答案 1 :(得分:0)

如何?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Translate</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script>
        var OcpApimSubscriptionKey1="267****6fac1978";
        var OcpApimSubscriptionKey2="00d****bff196393";
        var OcpApimSubscriptionRegion="koreacentral";
        var tmp_jsonstr="";
        $(document).ready(function(){

        })
        function bingnewssearch(){
            $.ajax({
                url: 'https://panshubeicognitiveservices.cognitiveservices.azure.com/bing/v7.0/news/search?q='+$("#keywords").val()+"&mkt=zh-CN&setLang=EN&cc=EN&count=5",
                method: 'GET',
                contentType: "application/x-www-form-urlencoded; charset=urf-8",
                dataType: 'json',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Ocp-Apim-Subscription-Key', OcpApimSubscriptionKey1);
                },
                success:function(result){
                    var myJSON = JSON.stringify(result);
                    tmp_jsonstr=myJSON;
                    $("#orginresult").html(myJSON)
                },
                error:function(){
                    alert("Oop, No Data Response");
                }
            })
        }
        function translatejson(){
            var str="[{\"Text\":\""+tmp_jsonstr.replace(/\"/g,"'")+"'\"}]";
            
            var jsonData=eval( str);//JSON.parse(str);
            $.ajax({
                url: "https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&from=zh-Hans&to=en",
                method: 'POST',
                contentType: "application/json; charset=UTF-8",
                dataType: 'json',
                data:str,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Ocp-Apim-Subscription-Key', OcpApimSubscriptionKey2);
                    xhr.setRequestHeader('Ocp-Apim-Subscription-Region', OcpApimSubscriptionRegion);
                },
                success:function(result){
                    var myJSON1 = JSON.stringify(result);
                    var str=result[0].translations[0].text;
                    str="{"+str.replace(/'/g, '"')+"}"
                    $("#translatedresult").html(str)
                },
                error:function(){
                    alert("Oop, No Data Response");
                }
            })
        }
    </script>
</head>
<body>
    <div>
        <div><p>Bing News Search</p></div>
        <div>
            <input type="text" id="keywords" placeholder="key words"/>
        </div>
        <div>
            <button onclick="bingnewssearch()">Search</button>
        </div>
        <div>Orgin Result</div>
        <div>
            <span id="orginresult"></span>
        </div>
    </div>
    <hr/>
    <div>
        <div>
            <button onclick="translatejson()">translate orgindata</button>
        </div>
        
        <div>
            <span id="translatedresult"></span>
        </div>
    </div>
</body>
</html>
$('a[data-action="validate-step"]').click(function(event) {
  var checked = $(this).prev().find('[data-next]').has(':checked').data('next');
  console.log(checked);
});