JQuery Conditional Click Events

Question

I have an unordered list of items arranged in rows. When the user clicks on a line, I want the text in the line to be added to a separate text field. The problem with my current code is that if a user clicks on several boxes, all the associated text with each of these fields will be added to the text box. I would like to add text only from the last element of the line that the user clicked.

Here is my 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');
});

}

Basically, I think I want to use the "if" operator to control a click in a list of time list items.

example:

if (DC_id_37 button is pressed) {add ('text'); } else if (DC_id_39 button is pressed) {append ('other text');

Here is the related 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 HTML

HTML, Dashcode:

 <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

, , :

$('#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 2

. :

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

, .

---

Update:

, <div /> <li /> : eq (n) selector ( ). , <div /> , .

:

• : parent selector, <divs />, ( ).

  $("#timeList > li > div:parent").click(function() { });

• Attribute Starts With Selector, <div /> , "DC_id_" ".

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

, . ( ), , .

Answer 3

html: (adapt to taste, do some 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);
    });
});

It is reused on the page, so you can add more meeting boxes to the page. I personally avoid using an element identifier such as a plague, better abstract it and significantly reduce the code if you generalize.