Question

我目前有以下div：

EnumerateFiles

我希望能够单击此部分将其更改为：

<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>

，然后再次单击以显示cvar_monthly。这个变量只是一个数字。关于如何执行此操作的任何指示？

<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

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>

单击时更改div内容

2 个答案: