时间戳

首页 > 解决方案 > HTML按下时更改文本不起作用

javascript - HTML按下时更改文本不起作用

问题描述

我正在创建一个社交媒体网站，并且我正在添加一个功能，如果帖子的摘要超过 50 个字符，则显示最多 50 个字符的摘要。如果也是这种情况，我会在摘要末尾附加一个..more，当按下它时，现在将文本更改为空字符串。

在提要页面上，最新的帖子完美运行，然后在下方添加了...more的帖子在按下时不会改变。

{% extends 'accounts/base.html' %}
{% block content %}
{% load widget_tweaks %}
{% load static %}
{% for post in posts %}
<script>
    function moretext(){
      document.getElementById("moretext").innerHTML = "";
    }
</script>
  <div class="container pl-5">
    <div class="row pt-3">
      <img src="{% static 'rect.jpg' %}" width="600px" height="60px">
      <div class="pt-3 pl-5" style="position: absolute;"> <b> {{ post.user.username }} </b> </div>
      <br>
      <div class="card" style="width: 600px;">
         <img src="{{ post.file.url }}" width="599px">
      </div>
      <br>
      <img src="{% static 'rect.jpg' %}" width="600px" height="150px">
      <div class="col-6">
          {% if post.summary|length > 50 %}
              <div class="" style="position: absolute; bottom: 75px; left: 35px;"> <b> {{ post.user.username }} </b> {{ post.summary_pretty }} <span onclick="moretext()" id="moretext" style="cursor: pointer;" class="text-muted">...more</span> </div>
          {% else %}
              <div class="" style="position: absolute; bottom: 75px; left: 35px;"> <b> {{ post.user.username }} </b> {{ post.summary }}  </div>
          {% endif %}
        </div>
      </div>
    </div>
    <br>
    <br>
    <br>
{% endfor %}
{% endblock %}

模型.py

from django.db import models
from django.contrib.auth.models import User

class Post(models.Model):
    file = models.FileField(upload_to='files/')
    summary = models.TextField(max_length=600)
    pub_date = models.DateTimeField(auto_now=True)
    user = models.ForeignKey(User, on_delete=models.CASCADE)

    def __str__(self):
        return self.user.username

    def pub_date_pretty(self):
        return self.pub_date.strftime('%b %e %Y')

    def summary_pretty(self):
        return self.summary[:50]

    def summary_rem(self):
        return self.summary[50:]

有关的：

   <script>
           function addMore(e) {
              e.innerText = "{{ post.summary_rem }}";
            }
        </script>

<span onclick="addMore(this)" style="cursor: pointer;" class="text-muted">...more</span>

标签： javascripthtmlcss

解决方案

这里的技巧是使用this关联的 onclick 事件。这this将允许您访问元素并且您可以应用您的逻辑。

function addMore(e) {
  e.innerText = "New conent added " + new Date().toLocaleTimeString();
  e.className += ' hasconent';
}
body {
  margin: 0;
}

.post {
  background: #eee;
  padding: 1em;
  margin: 1em;
}

.more {
  color: blue;
}

.more:hover {
  cursor: pointer;
}

.more.hasconent {
  color: inherit;
}
<div class="post">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  <span class="more" onclick="addMore(this)">More..</span>
</div>
<div class="post">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  <span class="more" onclick="addMore(this)">More..</span>
</div>
<div class="post">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  <span class="more" onclick="addMore(this)">More..</span>
</div>

推荐阅读