ダイアログから変数を保存して他のdivに渡します

Question

私は値のリストを持つダイアログボックスを持っています。ユーザーは、複数の<li>をクリックして選択できるはずです。彼らは、ボタンをクリックすると、次に、選択した各項目のテキストは、これはあなたのコードで何をすべき#landing

<!-- this is the dialog box --> 
<div class="fontBox"> 
    <ul> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    </ul> 
</div> 
<div id="Button">Insert Value</div> 

<!-- Previous Page --> 
<table> 
    <tr> 
    <td id="landing">This is where I want the value to go</td> 
    </tr> 
</table> 

$('.fontBox ul li').on('click', function() { 
    $(this).css('background', 'green'); 
    var nValue = $(this).val($(this).text()); 
    localStorage.setItem("nValue", nValue); 

    if (nValue != null) { 
     $('#landing').text(nValue); 
    } 
}); 

Answer 1

仕事にこれを変更する必要がある事柄がいくつかあります。まず、<li>のクリックとは別にボタンのクリックを処理する必要があります（ここでは<button>タグをお勧めしますが、必ずしも必要ではありません）。

.toggleClass(classStr)は、jQueryでクラスを追加したり削除したりするのに最適な方法です。これは本当に<li>とする必要があります。次に、すべての.selectedリスト項目を取得し、そのボタンをクリックして内臓を連結することができます。

例については下のスニペットを参照してください。スニペットでは機能しないので、localStorageラインをコメントアウトしました。自分のコードでコメントを解除してください。また、JavaScriptコードからスタイリングを削除してCSSに配置したことに注目してください。これは、このように分けておくのが最善です。なぜ私がこれをお勧めするのかについてもっと知りたいのであれば、 "Separation of Concerns"を参照してください。そして/またはただコメントに尋ねてください。私はここでさらに説明するために最善を尽くします。

var $liEls = $('.font-box ul li'); 
 
$liEls.on('click', function() { 
 
    $(this).toggleClass('selected'); 
 
}); 
 

 
$('#insert-button').on('click', function() { 
 
    var $selected = $liEls.filter('.selected'); 
 
    var nValue = ''; 
 
    $selected.each(function(idx, el) { 
 
    nValue = nValue + $(el).text(); 
 
    }); 
 

 
    // Save to local storage (doesn't work in snippets) 
 
    //localStorage.setItem("nValue", nValue); 
 
    
 
    $('#landing').text(nValue); 
 
});

.font-box ul { 
 
    list-style: none; 
 
    padding: 0px; 
 
} 
 

 
.font-box li { 
 
    cursor: pointer; 
 
} 
 

 
.font-box li:hover { 
 
    background: lightgray; 
 
} 
 

 
.font-box li.selected { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- this is the dialog box --> 
 
<div class="font-box"> 
 
    <ul> 
 
    <li>A</li> 
 
    <li>B</li> 
 
    <li>C</li> 
 
    </ul> 
 
</div> 
 
<button id="insert-button">Insert Values</button> 
 

 
<!-- Previous Page --> 
 
<table> 
 
    <tr> 
 
    <td id="landing">This is where I want the value to go</td> 
 
    </tr> 
 
</table>

Answer 2

に追加されますか？

var nValue = $(this).val($(this).text()); 

それだけで次のようになります。

var nValue = $(this).html();