單擊時更改div內容

Question

我目前有以下div：

<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
    <span class="count_top"><i class="fa fa-money"></i> Daily CVaR</span>
    <div><span class="count">{{ cvar|round(2) }}</span><font size="5">%</font></div>
    <span class="count_bottom">&euro;{{ cvar_pnl|round(2) }} of limit <span style="color:#E74C3C">&euro;x</span></span>
</div>

我希望能夠單擊此部分將其更改為：

<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
    <span class="count_top"><i class="fa fa-money"></i> Weekly CVaR</span>
    <div><span class="count">{{ cvar_weekly|round(2) }}</span><font size="5">%</font></div>
    <span class="count_bottom">&euro;{{ cvar_pnl_weekly|round(2) }} of limit <span style="color:#E74C3C">&euro;x</span></span>
</div

然后再次單擊以顯示cvar_monthly。 這個變量只是一個數字。 關於如何執行此操作的任何指示？

        $('.count').each(function () {
            $(this).prop('Counter',0).animate({
                Counter: $(this).text()
            }, {
                duration: 2000,
                easing: 'swing',
                step: function (now) {
                    $(this).text(Math.round(now * 100) / 100);
                }
            });
        });

Answer 1

您可以使用JS腳本執行此操作。 首先，向您的div添加一個onClick事件和一個ID。 然后，編寫將更改div值的js腳本：

 function changeValue() { var toChange = document.getElementById("thisChanges"); var htmla = "First HTML value"; var htmlb = "Second HTML Value"; if (toChange.innerHTML == htmla){ toChange.innerHTML = htmlb; } else { toChange.innerHTML = htmla; } } 

 <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count" onclick="changeValue()" ID="thisChanges"> First HTML value </div> 

確保在網頁的標簽中包含此功能。 如果您還有其他疑問，請不要猶豫。

Answer 2

為什么不創建所有元素，而只是更改可見性而不是更改內容？！ 到目前為止，這是更好的維護方法，並且可以簡化代碼。

 $('.tile_stats_count').on('click', function() { var clicked = $(this), daily = $('.tile_stats_count.daily').hide(0), weekly = $('.tile_stats_count.weekly').hide(0), monthly = $('.tile_stats_count.monthly').hide(0); clicked.is('.daily') ? weekly.show(0) : clicked.is('.weekly') ? monthly.show(0) : daily.show(0); }); 

 .tile_stats_count { display: none; } .tile_stats_count.default { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count daily default"> <span class="count_top"><i class="fa fa-money"></i> Daily CVaR</span> <div><span class="count">{{ cvar|round(2) }}</span><font size="5">%</font></div> <span class="count_bottom">&euro;{{ cvar_pnl|round(2) }} of limit <span style="color:#E74C3C">&euro;x</span></span> </div> <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count weekly"> <span class="count_top"><i class="fa fa-money"></i> Weekly CVaR</span> <div><span class="count">{{ cvar_weekly|round(2) }}</span><font size="5">%</font></div> <span class="count_bottom">&euro;{{ cvar_pnl_weekly|round(2) }} of limit <span style="color:#E74C3C">&euro;x</span></span> </div> <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count monthly"> <span class="count_top"><i class="fa fa-money"></i> Monthly CVaR</span> <div><span class="count">{{ cvar_monthly|round(2) }}</span><font size="5">%</font></div> <span class="count_bottom">&euro;{{ cvar_pnl_monthly|round(2) }} of limit <span style="color:#E74C3C">&euro;x</span></span> </div>