Question

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

这是我的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”语句来控制时间列表选择器元素列表中的单击。

示例：

if（单击DC_id_37）{ 附加（ '文本'）; } else if（单击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>

Answer 1

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

// 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);
});

如果用户稍后更改所选日期，此方法还会保存所选时间。

<强>更新

我使用:eq(n)选择器更新了我的示例以匹配每个<div />下的第二个嵌套<li />元素（选择器从零开始）。此解决方案假定目标<div />元素将总是作为第二个元素，基于您的评论。

您还有其他一些选择：

您可以使用:parent选择器仅影响包含文本（或任何子元素）的<divs />。

$("#timeList > li > div:parent").click(function() { });
或者，您可以使用Attribute Starts With Selector仅影响ID为以“DC_id _”开头的<div />元素。

$("#timeList > li > div[id^='DC_id_']").click(function() { });

我不确定哪种解决方案表现最佳。就个人而言，我建议使用第三个选项（Attribute Starts With选择器），因为生成的ID通常比元素的索引或内容更可预测。

Answer 2

我相信这就是你要找的东西：

$('#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());
});

Answer 3

粗略

html :(调整品味，多做一些css）

<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>

jquery的

$('.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);
    });
});

可在页面上重复使用，因此您可以在页面上拥有更多约会框。我个人避免使用像瘟疫一样的元素ID，如果你概括的话，可以更好地抽象它并大大缩短代码。

JQuery条件点击事件

3 个答案: