根據div數據的javascript案例開關

Question

**你好**

1）我想案件切換根據顯示在div「顯示」。

• 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：當然。