如何在 JavaScript 中编写 Show more and show less

Question

我有这样的cshtml代码

  <span class="p1">
                    Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book written by Rajiv Malhotra and Aravindan Neelakandan which argues that India's integrity is being undermined
                    <button class="More">..Show More</button>
                </span>

按下跨度内的按钮时，它将显示所有字符。如果我们再次按下它，将出现 100 个字符。我该怎么做？

Answer 1

您可以使用事件侦听器并将父级设置为全文，就像单击按钮时一样

const fullText = 'Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book written by Rajiv Malhotra and Aravindan Neelakandan which argues that India\'s integrity is being undermined and some more'

// get the more buttons
const buttons = document.getElementsByClassName('More');

// attach an click event listener
Object.values(buttons).forEach(button => {
  button.addEventListener('click', (event) => {
  
    // onclick set the parents content to the fullText
    event.target.parentNode.textContent = fullText
  })
})

<span class="p1">
                    Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book written by Rajiv Malhotra and Aravindan Neelakandan which argues that India's integrity is being undermined
                    <button class="More">..Show More</button>
                </span>