Question

我想填充＆＃34; eventTitle＆＃34;的值。在＆＃34;要求＆＃34;输入框时，单击相应的复选框。即如果某个人在Vels Group Of Instutions的复选框上出现问题，那么我自动希望这个名称在texbox中填充名称＆＃34; Requirement＆＃34;如果单击多个复选框，我希望它以逗号分隔。下面是我试图获得的代码，但它不起作用并且未定义。

    <div class="wid100">
    <div class="eventTitle">Vels Group Of Instutions</div>
    <div class="eventDate">2017-07-25</div>
    <div class="eventVenue">This is world wide institute of technology </div>
    <div class="selectEvent">
        <input type="checkbox" class="seminar selected" id="179">
        <label for="179"></label>
    </div>
</div>

<div class="wid100">
    <div class="eventTitle">Title goes here</div>
    <div class="eventDate">2017-07-25</div>
    <div class="eventVenue">sdfdsafasdfdsafdsafsadfsdfsdf </div>
    <div class="selectEvent">
        <input type="checkbox" class="seminar" id="179">
        <label for="179"></label>
    </div>
</div>


<input type="text" name="Requirement" placeholder="Title 01" id="divclass" required="required" class="pull-left" />

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

$(".seminar").click(function () {

        if ($(this).is(":checked")) {

             //checked
             $(this).addClass("selected");
             var event_title = "";

              event_title =  $(".selected").siblings('.eventTitle').val();
              console.log(event_title); return false;

         } else {
             //unchecked
             $(this).removeClass("selected");
         }

});

Answer 1

.eventTitle不是.selected的兄弟，而.eventTitle是一个没有值的div元素，文本就在那里。改变这一行

event_title =  $(".selected").siblings('.eventTitle').val();

到

event_title =  $(this).parent().siblings('.eventTitle').text();

或

event_title =  $(this).parent().siblings('.eventTitle').html();

Answer 2

您遇到的问题是因为.eventTitle不是单击复选框的兄弟，所以DOM遍历逻辑是错误的。 div元素也没有val()，因此您应该使用text()或html()。

但是，您可以使用map()构建一个数组然后join()来改进逻辑并实现所选事件标题的逗号分隔列表设置#divclass的值。试试这个：

＆＃13;

$(".seminar").click(function() {
  $(this).toggleClass('selected', this.checked);
  
  var eventNames = $('.seminar:checked').map(function() {
    return $(this).closest('.wid100').find('.eventTitle').text();
  }).get().join(',');
  $('#divclass').val(eventNames);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wid100">
  <div class="eventTitle">Vels Group Of Instutions</div>
  <div class="eventDate">2017-07-25</div>
  <div class="eventVenue">This is world wide institute of technology </div>
  <div class="selectEvent">
    <input type="checkbox" class="seminar selected" id="179">
    <label for="179"></label>
  </div>
</div>

<div class="wid100">
  <div class="eventTitle">Title goes here</div>
  <div class="eventDate">2017-07-25</div>
  <div class="eventVenue">sdfdsafasdfdsafdsafsadfsdfsdf </div>
  <div class="selectEvent">
    <input type="checkbox" class="seminar" id="179">
    <label for="179"></label>
  </div>
</div>

<input type="text" name="Requirement" placeholder="Title 01" id="divclass" required="required" class="pull-left" size="100" />

＆＃13;

我建议将#divclass的ID更改为更具描述性的内容，因为该元素不是div，而且它是标识符，而不是类。< / p>

最后，您的.seminar元素具有相同的id属性，该属性无效。你应该确保id在DOM中是唯一的 - 假设这不仅仅是复制/粘贴问题代码的错字。

Jquery需要兄弟姐妹的价值但不起作用

2 个答案: