Question

**你好**

1）我希望案例根据div“display”中显示的内容进行切换。

div显示按钮添加的点击次数。

2）如果超过4的数字显示xxxx，则可以添加一个案例。

3）我可以在案例中显示图片而不是文字吗？

这是我的代码，但它不起作用。

$('[id=display]').each(function() {
  var text = $(this).text();
  text = $.trim(text);

  switch (text) {
    case '1':
      $('#final').text('x---');
      break;
    case '2':
      $('#final').text('xx--');
      break;
    case '3':
      $('#final').text('xxx-');
      break;
    case '4':
      $('#final').text('xxxx');
      break;
    default:
      $('#final').text('----');
      break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  var capnum = 0;

  function add() {
    capnum++;
    document.getElementById('display').innerHTML = capnum;
  }
</script>

<button onclick="add()">add</button>

<div id="display">
  <script type="text/javascript">
    document.write(capnum);
  </script>
</div>

<div id="final"></div>

Answer 1

每次点击活动都需要更新。请参阅下面的代码。

<script>
var capnum = 0;
function add() {
    capnum++;
    document.getElementById('display').innerHTML = capnum;
    update();
}
</script>

<script>
    function update() {
        $('[id=display]').each(function () {
            var text = $(this).text();
            text = $.trim(text);
            // discard switch statement for better (from dandavis's comment)
            $('#final').text({1:'x---',2: 'xx--',3:'xxx-', ... }[text] || '----'); 
        });
    }
</script>

问题3：确定。

javascript案例根据div数据切换

1 个答案: