Javascript JQuery条件单击事件

我有一个按行组织的无序元素列表。当用户单击某一行时，我希望将该行中的文本追加到单独的文本字段中。我当前代码的问题是，如果用户单击多个框，则与每个框关联的所有文本都将追加到文本字段中。我只想附加用户单击的最后一行元素中的文本

以下是我的javascript：

function clickEvents() {

// Day List Selector
$('#DC_id_1').click(function() {
    $('#whenTextField').attr('value', 'Today');
});
$('#DC_id_3').click(function() {
    $('#whenTextField').attr('value', 'Tomorrow');
});
$('#DC_id_5').click(function() {
    $('#whenTextField').attr('value', 'Later');
});

// Time List Selector

$('#DC_id_37').click(function() {
   var day = $('#whenTextField').attr('value');
   $('#whenTextField').attr('value', day + ', Right Now');
});
$('#DC_id_39').click(function() {
   var day = $('#whenTextField').attr('value');
   $('#whenTextField').attr('value', day + ', Morning');
});
$('#DC_id_41').click(function() {
   var day = $('#whenTextField').attr('value');
   $('#whenTextField').attr('value', day + ', Midday');
});
$('#DC_id_43').click(function() {
   var day = $('#whenTextField').attr('value');
   $('#whenTextField').attr('value', day + ', Afternoon');
});
$('#DC_id_45').click(function() {
   var day = $('#whenTextField').attr('value');
   $('#whenTextField').attr('value', day + ', Evening');
});

}

基本上，我想我想要使用一个“if”语句来控制时间列表选择器元素列表中的点击

例如：

如果（单击DC_id_37）{ 附加（‘文本’）； } 否则如果（单击DC_id_39）{ 追加（‘其他一些文本’）

以下是相关的HTML：

<ul id="dayList">
   <li id="DC_id_1">
      Today
   </li>
   <li id="DC_id_3">
      Tomorrow
   </li>
   <li id="DC_id_5">
      Later
   </li>
 </ul>

 <ul id="timeList">
    <li id="DC_id_37">
       Right Now
    </li>
    <li id="DC_id_39">
       Morning
    </li>
    <li id="DC_id_41">
       Midday
    </li>
    <li id="DC_id_43">
       Afternoon
    </li>
    <li id="DC_id_45">
       Evening
    </li>
 </ul>


 <textField id="whenTextField">

今天


明天


后来




马上


早晨


正午


下午


傍晚

*注意，我只是手工创建了这个HTML，因为我正在用Dashcode构建web应用程序，它会生成一些非常难看的HTML

Dashcode创建的实际HTML：

 <ul id="timeList"> 
   <li> 
      <div id="foo"></div> 
      <div id="DC_id_37">Right Now</div> 
      <div></div> 
   </li> 
   <li> 
       <div id="foo2"></div> 
       <div id="DC_id_39"></div> 
       <div></div> 
   </li> 
  </ul>

马上

我相信这就是您想要的：

$('#DC_id_37').click(function() {
   var day = $('#whenTextField').attr('value').split(",")[0];
   $('#whenTextField').attr('value', day + ', Right Now');
});

.split（“，”[0]

将获取文本框中内容的第一部分

---

您可以通过以下方式简化代码：

$('#dayList li').click(function() {
  $('#whenTextField').attr('value',$(this).text());
});

$("#timeList li").click(function() {
  var day = $('#whenTextField').attr('value').split(",")[0];

  $('#whenTextField').attr('value', day + ', '+$(this).text());
});

---

您需要替换旧值，而不是简单地追加新值。我会这样做：

// Based on the HTML you posted, we only need two click functions.
$("#dayList > li > div:eq(1)").click(function() {
    var newDate = $(this).text();

    var currentValues = $("#whenTextField").attr("value").split(", ");

    // Initialize this as an empty string in case the user has not yet selected
    // a time.
    var time = "";

    // Get the previous time, if one has already been appended.
    if (currentValues.length == 2) {
        time = ", " + currentValues[1];
    }

    // Update the value of the text field.
    $("#whenTextField").attr("value", newDate + time);
});

$("#timeList > li > div:eq(1)").click(function() {
    // Get the current date value.
    var date= $("#whenTextField").attr("value").split(", ")[0];

    // Get the text from the 'li' element that raised the event.
    var time = $(this).text();

    // Update the value of the text field, keeping the previously selected date.
    $("#whenTextField").attr("value", date + ", " + time);
});

如果用户以后更改所选日期，此方法还可以节省所选时间

---

更新：

我使用选择器更新了我的示例，以匹配每个

下的第二个嵌套

元素（选择器是零基的）。此解决方案假定目标

元素将始终是第二个，基于您的注释

您还有一些其他选择：

• 您可以使用选择器仅影响包含文本（或任何子元素）的

  $（“#timeList>li>div:parent”）。单击（function（）{}）；

• 或者，您可以使用仅影响id以“DC\u id\u”开头的
  元素

  $（“#timeList>li>div[id^='DC#u id{']）。单击（function（）{}）；

我不确定哪种解决方案性能最好。我个人建议使用第三个选项（属性以选择器开头），因为生成的ID通常比元素的索引或内容更可预测。

html：（根据口味调整，通常需要做一些css）

可在页面上重复使用，因此您可以在页面上有更多的约会框。

---

我个人避免使用像瘟疫一样的元素ID，如果你概括的话，最好将它抽象出来，并大幅缩短代码。

虽然我很确定有一种更简单的方法来做你想做的事情，但我不太明白。如果你发布行的HTML，这会有所帮助。谢谢你！非常感谢！现在我需要阅读文档没有问题。您可以在此处阅读有关拆分的更多信息：本质上，它使用我们指定的分隔符（在本例中为逗号）拆分字符串。它返回一个数组。

[0]

获取该数组的第一个元素。嘿，这看起来很棒，但是，我使用的是Dashcode，我的HTML的结构并不像我在示例中概述的那样简单。每个

的结构如下：
• 现在
• li'））选择器以集中于每个
• 中嵌套的第二个？为了便于阅读，我将格式化的HTML添加到原始帖子的底部。我根据您的评论更新了我的答案，并根据更新的HTML示例为您提供了更多选项。我希望这些选项对您有所帮助！

  <div class="appointment">
      <div class="options">
         <ul class="day">
            <li>Today</li>
            <li>Tomorrow</li>
            <li>Later</li>
         </ul>
         <ul class="time">
            <li>Right Now</li>
            <li>Morning</li>
            <li>Midday</li>
            <li>Afternoon</li>
            <li>Evening</li>
         </ul>
      </div>
      <input class="when" type="text" />
  </div>
  

  $('.appointment').each(function(){
      var self = $(this)
      , whenField = self.find('.when')
      , day = 'choose a day'
      , time = 'choose a time';
  
      self.delegate('.options li', 'click', function(e){
          var li = $(this), ul = li.closest('ul');
          if(ul.hasClass('day')) {
              day = li.text();
          } else if(ul.hasClass('time')) {
              time = li.text();
          }
          whenField.val(day + ' - ' + time);
      });
  });