这是我的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')
感谢您的帮助。
答案 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);
});