0

jqueryによってダイアログボックスを作成し、その中の文章にクリック回数のカウント数を入れたいのですが、html内にダイアログボックスとしたい文章を用意すると、初期値を取得してしまいます。どのような解決法がありますでしょうか、ご教授いただければ幸いです。
(funcadd1()は#sampleをparseIntして1を足す関数です)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript">$(function () {
$('#dialogdemo1').dialog({
    autoOpen: false,
    title: 'Confirmation',
    closeOnEscape: false,
    modal: true,
    buttons: {
        "OK": function () {
            $(this).dialog('close');
        }
    }
});
});
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
function funcAdd1() {
    document.getElementById("sample").innerHTML =
    parseInt(document.getElementById("sample").firstChild.nodeValue) + 1;
    }
</script>
<script type="text/javascript">
Dialog()

   function Dialog() {
    $('.kb').click(function () {
        $('#dialogdemo1').dialog('open');
    });
}
</script>
   <div class="every">
            <div class="buttons">
                <div class="fav">
                    <div id="sample">1</div>
                    <div id="favorite">
                        <button onclick="return funcAdd1()" class="fb">カウント増</button>
                    </div>
                    <div class="kb">
                        <button type="button"  class="kakunin" onclick="Dialog()">確認</button>
                    </div>
                </div>
            </div>    
        </div>
        <div id="dialogdemo1">
            <p>選択</p>
            <form id="method">
                <select name="Owen">
                    <option value="0">1</option>
                    <option value="1">2</option>
                    <option value="2">3</option>
                    <option value="3">4</option>
                </select>
            </form>
            <script type="text/javascript">
                var count = parseFloat(document.getElementById("sample").innerHTML);
                document.write(count);
            </script>
            
        </div>​​

1
  • スニペットには最低限可動するコードを記述いただけますか?現時点ではJavascriptがエラーになっています。
    – keitaro_so
    2018年5月1日 5:18

1 件の回答 1

0

ダイアログが開かれたタイミングで値を取得・セットしたいっていうことですね。
ダイアログ中に適当な要素 <span id="foo"></span> を置いておいて、 dialog の trigger で処理するのが綺麗かと思います。

$('#dialogdemo1').dialog({
    // 中略
    open: function () {
        $('#foo').html(parseInt($("#sample").html()));
    }
});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。