using .replaceWith with switch function

Question

$(".td").click(function() {
    switch (elementNode.previousSibling.id)
    {
  case "location"
    (".td").replaceWith('<input type="text" name="location"></input>');
    break;
  case "occ"
    (".td").replaceWith('<input type="text" name="occ"></input>');
    break;
  case "hobby"
    (".td").replaceWith('<input type="text" name="hobby"></input>');
    break;
    }
});

The above is the Javascript that I'm working with, and here is the HTML

<div class="tr"><div class="td" id="location">{L_LOCATION}:</div> <div class="td">{LOCATION}</div></div>
<div class="tr"><div class="td" id="occ">{L_OCCUPATION}:</div> <div class="td">{OCCUPATION}</div></div>
<div class="tr"><div class="td" id="hobby">{L_INTERESTS}:</div> <div class="td">{INTERESTS}</div></div>

What I'm wanting to do is when someone clicks on the ".td" div for it to turn into an input field. The reason that I think I need to use switch is there is a lot of conditions that need to be met (as you can see within the code) and that would be too many if and else statements. So I'm not sure if I'm doing this right, as I've just started programming (complete beginner here, so pardon me if there are a ton of errors) The content you see within the HTML tags are template variables in case you're wondering.

Inside of this `click` function, in order to get the specific `.td` clicked, you can use `this`...not `(".td")` — Ian, Oct 26 '12 at 01:58
@ianpgall I thought you could only do that after the selector has used? Or do you mean within the switch statement? — Hikaru Kagi, Oct 26 '12 at 02:12
He means within the switch statement. You should be using `this` to reference the `.td`, not `(".td")` which is a string. — Xymostech, Oct 26 '12 at 02:15
Inside of the callback for any event handler, `this` (`$(this)`) refers to the actual element that the handler is being handled by. So with your situation, you end up binding 6 `click` handlers to the elements that have the class "td"...but you're only binding one function. The value of `this` when the function is called depends on which element invoked it, and in order to see which one, you can use `this`. Does that make sense? — Ian, Oct 26 '12 at 02:15
@Xymostech Yeah, and I thought it would make sense when I said "Inside of this `click` function" but I guess not... — Ian, Oct 26 '12 at 02:17

score 0 · Answer 1 · answered Oct 26 '12 at 02:11

0

I've tested this code and it works:

$(function() {   
$(".td").on('click', function() {
  var id = $(this).prev().attr("id");
  console.log(id);
        switch (id)
        {
          case "location":
        $(this).replaceWith('<input type="text" name="location"></input>');
        break;
          case "occ":
         $(this).replaceWith('<input type="text" name="occ"></input>');
        break;
          case "hobby":
         $(this).replaceWith('<input type="text" name="hobby"></input>');
        break;
        }        
 });
        });

http://jsbin.com/ogofus/1/edit

(only click on the white text)

answered Oct 26 '12 at 02:11

Angelo A

2,744
6
28
37

It said "Uncaught TypeError: Object [object Object] has no method 'on'" in the developer console so I Googled it and I needed to change the "on" to "bind". – Hikaru Kagi Oct 26 '12 at 02:39
@HikaruKagi Did you include the latest jQuery? And don't forget to accept / vote an answer if it helped you – Angelo A Oct 26 '12 at 11:43

using .replaceWith with switch function

1 Answers1