Как изменить содержание DIV с тем же родителем, используя jQuery

Первое сообщение здесь.Как изменить содержание DIV с тем же родителем, используя jQuery

У меня есть список родительских divs теоретической длины, n. Внутри этих родителей есть «дочерние» divs, содержащие выбранное раскрывающееся меню и кнопку редактирования соответственно.

Нажав кнопку «Изменить», я хочу изменить выпадающее меню на стандартное текстовое поле ввода.

Я рассмотрел ряд примеров, но не смог найти наиболее подходящее решение. Возможно, было бы лучше иметь кнопку редактирования в том же div, что и выпадающее меню?

Также возникает проблема с обработчиком событий. Предложения были бы очень признательны. Благодарю.

HTML ниже:

<html> 
<body> 

<div class="test"> 

    <div class="choose"> 
     <select class = "tag"><option value='gain'>gain</option><option value='share'>share</option><option value='bring'>bring</option> 
    </select> 
    </div> 

    <div class="edit-button"> 
     <a href="#" data-action="edit">edit</a> 
    </div> 

</div> 

<div class="test"> 

    <div class="choose"> 
     <select class = "tag"><option value='gain'>gain</option><option value='share'>share</option><option value='bring'>bring</option> 
    </select> 
    </div> 

    <div class="edit-button"> 
     <a href="#" data-action="edit">edit</a> 
    </div> 

</div> 

<div class="test"> 

    <div class="choose"> 
     <select class = "tag"><option value='gain'>gain</option><option value='share'>share</option><option value='bring'>bring</option> 
    </select> 
    </div> 

    <div class="edit-button"> 
     <a href="#" data-action="edit">edit</a> 
    </div> 

</div> 

</body> 
</html>

И JQuery:

<script type="text/javascript" src="jquery-1.6.4.js"></script> 


<script type='text/javascript'> 
$(document).ready(function() { 
var multiTags = $("#multi"); 

     function handler(e) { 
      // get the element which trigged the event 
      var jqEl = $(e.currentTarget); 

      // get parent div 
      var tag = jqEl.parent(); 

      // check which action we should perform 
      switch (jqEl.attr("data-action")) { 

      case "edit": 

       var tag = tag.parent(); 
       $(this).tag.html('<input type="text" id="something"/>'); 

       break; 

      } 

      return false; 
     } 

    multiTags.find("a").live("click", handler); 
}); 



</script>

источник

2013-11-03 riverrunner

вы пытались с помощью .он вместо. жить? – joshstrike

'.live' устарел в jQuery 1.7, удален в 1.9. Вы должны переключиться на '.on'. – Barmar

Что такое идентификатор multi? – mplungjan

Что об этом:

$(".edit-button").on("click", "a[data-action=edit]", function() { 
    var testDiv = $(this).parent().parent(); 
    var selectValue = testDiv.find(".choose").find("select").val(); 
    var input = "<input name='' value='" + selectValue + "'/>"; 
    testDiv.find(".choose").html(input); 
});

JSFiddle: http://jsfiddle.net/WxPPR/

источник

2013-11-03 06:52:13 Krasimir

Спасибо за предложение этого решения. Гораздо более элегантно. Я писал свои собственные подпрограммы в сравнении ... – riverrunner

Как изменить содержание DIV с тем же родителем, используя jQuery

ответ

Смежные вопросы