使用带有开关功能的 .replaceWith

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

以上是我正在使用的 Javascript，这里是 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>

我想要做的是当有人点击“.td” div 使其变成输入字段时。我认为我需要使用 switch 的原因是需要满足很多条件（正如您在代码中看到的那样），并且 if 和 else 语句太多。所以我不确定我这样做是否正确，因为我刚刚开始编程（这里是初学者，如果有很多错误，请原谅我）您在 HTML 标记中看到的内容是模板变量，以防万一你想知道。

Answer 1

我已经测试了这段代码，它可以工作：

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

（只点击白色文字）