jQueryの表示プロパティは変更されませんが、その他のプロパティは

Question

です。クリックするとテキストを編集可能にしようとしています。以下は私が試しているコードです。タイトルがクリックされると、それを保存する入力ボックスとボタンが表示されます。

<div class="block"> 
    <div class="title">Title</div> 
    <div class="title-edit"> 
     <input type="text" name="title" value="Title"> 
     <button>Save</button> 
    </div> 
</div> 

は、私は色や要素とその作業のテキストを変更するなどの他のプロパティを変更したが、それはタイトルや編集要素のdisplayプロパティまたは.SHOW（）/。非表示（）関数を適用されていません。

以下はここで私は、他の特性/機能が働いていることを示すために、最後まで

$(title).html('abcd'); 

を追加しましたjsfiddle

https://jsfiddle.net/ywezpag7/

だ私のjQuery

$(function(){  
    $('.block').on('click', editTitle); 

    $('.title-edit button').on('click', saveTitle); 

}); 
function saveTitle(){ 
    var parent = $(this).closest('.block'); 
    var title = $('.title', parent); 
    var edit = $('.title-edit', parent); 
    $(title).show(); 
    $(edit).hide();  
} 

function editTitle(){ 
    $('.title-edit', this).show(); 
    $('.title', this).hide(); 
} 

ですディスプレイだけではありません。

タイトル要素のHTML変更を確認するには、タイトル要素が非表示になっているため、開発者ツールを使用してソースを確認する必要があります。

どこが間違っていますか？

Answer 1

問題はsaveTitle関数にあります。最初の行は、この関数の後にeditTitle関数が呼び出されると、イベントの伝播を停止する必要があります。

スニペット：

$(function(){ 
 
    $('.block').on('click', editTitle); 
 

 
    $('.title-edit button').on('click', saveTitle); 
 

 
}); 
 

 

 
function saveTitle(e){ 
 
    
 
    // this line 
 
    e.stopPropagation(); 
 
    
 
    
 
    var parent = $(this).closest('.block'); 
 
    var title = $('.title', parent); 
 
    var edit = $('.title-edit', parent); 
 
    title.show(); 
 
    edit.hide(); 
 
    title.text($('.title-edit input').val()); 
 
} 
 

 
function editTitle(e){ 
 
    $('.title-edit', this).show(); 
 
    $('.title', this).hide(); 
 
}

.title-edit{ 
 
    display:none 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div class="block"> 
 
    <div class="title">Title</div> 
 
    <div class="title-edit"> 
 
     <input type="text" name="title" value="Title"> 
 
     <button>Save</button> 
 
    </div> 
 
</div>

Answer 2

問題すでに述べたように、あなたのクリックイベントが戦っているということです。あなたのコードでは、タイトル編集クラスがブロック内にあるので、保存ボタンをクリックすると、両方のクリックのイベントがトリガーされます。

これを解決する最も簡単で簡単な方法は、.titleと.title-edit buttonで呼び出されるクリックイベントを切り替えることです。また、コードを単純化することもできます。

$(function(){  
    $('.title').click(editTitle);  
    $('.title-edit button').click(saveTitle);  
}); 
function saveTitle(){ 
    $('.title').show(); 
    $('.title-edit').hide(); 
    $(title).html('abcd'); 
} 

function editTitle(){ 
    $('.title-edit').show(); 
    $('.title').hide(); 
} 

https://jsfiddle.net/ywezpag7/7/

Answer 3

私はあなたのコードをデバッグしようとした、と私は見ていた、そしてあなたは「保存」ボタンをクリックして、両方の機能、saveTitle（）とeditTitleを（扱っていること）、そのためです。したがって、要素は最初は隠され、次に表示されます。