基于选择的无线电输入，应如何重新组织我的控制流查询？

问题描述

我一直在听点击元素标签元素，但所选 input [type =radio] 在事件期间似乎不更新。我应该听一个不同的事件，还是需要改变我的控制流？以下是代码：

  $（function（）{$（'＃reported label' ）{var query = $（'input [name =filter]：checked'）。val（）; var time =（new Date（））。toString（）; //这是填充，一个xhr请求这里$（'。query [data-method =click]'）。html（query +'at'+ time）;}）; $（'＃reported input [name =filter]' （）; var（）; var time =（new Date（））。toString（）; //这是填充，但我实际上在这里提供一个xhr请求$（'。query [data-method =change]'）。html（query +'at'+ time）;}）;}）;  

  input [name =filter] {display：none;}＃报告标签{background-color：#ccc; padding：5px;边距：5px; border-radius：5px; cursor：pointer;}。query {padding：5px; margin：5px;}。query：before {content：onattr（data-method）event：;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< ; / script>< form id =reported> < input type =radioname =filterid =questionvalue =questionschecked =checked> < label for =question>问题< / label> < input type =radioname =filterid =answervalue =answers> < label for =answer> Answers< / label> < input type =radioname =filterid =commentvalue =comments> < label for =comment>注释< / label> < input type =radioname =filterid =uservalue =users> < label for =user> Users< / label> < input type =radioname =filterid =companyvalue =companies> < label for =company> Companies< / label> < div class =querydata-method =click>< / div> < div class =querydata-method =change>< / div>< / form>  

/ p>

修改

现在，查询反映了以前选择的输入而不是当前选择的一个。

我的预期行为是为了反映输入，并且每次点击标签时，将调用该功能。

第二次修改

我在@ Tushar的建议中添加了。我不想要这个，因为当多次点击相同的标签时，它不会更新时间戳。

解决方案

我结束了使用此获取标签，然后使用其 属性来获取我需要的输入元素：

  $（function（） （'#reported label'）。click（function（）{var query = $（'input [name =filter]：checked'）。val（）; var time =（new Date（））toString（） ; //这是填充，但我实际上是在这里提交一个xhr请求$（'。query [data-method =click event]'）html（query +'at'+ time）;}）; $（ '#reported input [name =filter]'）on（'change'，function（）{var query = $（'input [name =filter]：checked'）val（）; var time = （new Date（））。toString（）; //这是填充，但我实际上是mak在这里请求一个xhr请求$（'。query [data-method =change event]'）。html（query +'at'+ time）; }）; $（'＃reporting label'）。click（function（）{var query = $（'＃'+ $（this）.attr（'for'））val（）; var time =（new Date（） .toString（）; //这是填充，但我实际上是在这里做一个xhr请求$（'。query [data-method =click event with this]'）。html（query +'at'+ time） ;}）;}）;  

  input [name =过滤器] {display：none;}＃报告标签{background-color：#ccc; padding：5px;边距：5px; border-radius：5px; cursor：pointer;}。query {padding：5px; margin：5px;}。query：before {content：onattr（data-method）：;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< form id =reported> < input type =radioname =filterid =questionvalue =questionschecked =checked> < label for =question>问题< / label> < input type =radioname =filterid =answervalue =answers> < label for =answer> Answers< / label> < input type =radioname =filterid =commentvalue =comments> < label for =comment>注释< / label> < input type =radioname =filterid =uservalue =users> < label for =user> Users< / label> < input type =radioname =filterid =companyvalue =companies> < label for =company> Companies< / label> < div class =querydata-method =click event>< / div> < div class =querydata-method =change event>< / div> < div class =querydata-method =click this with this>< / div>< / form>  

div>

I've been listening to the click event of label elements, but the selected input[type="radio"] does not seem to update during the event. Should I be listening to a different event or do I need to change my control flow somehow? Below is the code:

$(function() {
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="click"]').html(query + ' at ' + time);
  });

  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="change"]').html(query + ' at ' + time);
  });
});

input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method) " event: ";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>

  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>

  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>

  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>

  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>

  <div class="query" data-method="click"></div>
  <div class="query" data-method="change"></div>
</form>

Edit

Right now, the query reflects the previously selected input rather than the currently selected one.

My expected behavior is for the query to reflect the input that was just selected, and for the function to be called every time a label is clicked.

Second Edit

I added in @Tushar's suggestion. I don't want this because it does not update the timestamp when the same label is clicked multiple times.

解决方案

I ended up using this to get the label, then used its for attribute to get the input element I needed:

$(function() {
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="click event"]').html(query + ' at ' + time);
  });

  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="change event"]').html(query + ' at ' + time);
  });

  $('#reported label').click(function() {
    var query = $('#' + $(this).attr('for')).val();
    var time = (new Date()).toString();

    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="click event with this"]').html(query + ' at ' + time);
  });
});

input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method) ": ";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>

  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>

  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>

  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>

  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>

  <div class="query" data-method="click event"></div>
  <div class="query" data-method="change event"></div>
  <div class="query" data-method="click event with this"></div>
</form>

这篇关于基于选择的无线电输入，应如何重新组织我的控制流查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！