工作笔记开发求助：判断用户名角色，管理员旁显示'- expert'

Alright, let's figure out how to add that '- expert' tag only for the Administrator user in your work notes. I'll cover solutions for a few common tech stacks you might be using, since you didn't specify which one you're working with:

1. Native JavaScript + Static HTML #

If you're working with plain HTML and vanilla JS, here's how you can dynamically update the usernames:

First, your base HTML structure might look like this:

<div class="note-item">
  <img src="/path/to/admin-avatar.png" class="user-avatar" alt="User avatar">
  <span class="username">Administrator</span>
  <span class="create-date">May 20, 2024</span>
  <p class="comment-text">Here's an admin's work note.</p>
</div>
<div class="note-item">
  <img src="/path/to/user-avatar.png" class="user-avatar" alt="User avatar">
  <span class="username">JaneSmith</span>
  <span class="create-date">May 19, 2024</span>
  <p class="comment-text">Here's a regular user's work note.</p>
</div>

Then add this JavaScript to handle the conditional tag:

// Grab all username elements on the page
const usernameElements = document.querySelectorAll('.username');

usernameElements.forEach(element => {
  const currentUsername = element.textContent.trim();
  // Check if the username matches exactly (adjust case sensitivity if needed)
  if (currentUsername === 'Administrator') {
    // Append the '- expert' text right after the username
    element.insertAdjacentText('afterend', ' - expert');
    // Alternatively, you could rewrite the element's text directly:
    // element.textContent = `${currentUsername} - expert`;
  }
});

2. React (Functional Component) #

If you're using React, you can handle this with conditional rendering directly in your component:

export default function WorkNote({ avatarUrl, username, createdAt, comment }) {
  return (
    <div className="work-note">
      <img src={avatarUrl} alt={`${username}'s avatar`} className="avatar" />
      <div className="user-info">
        <span className="username">
          {username}
          {/* Only show '- expert' if username is Administrator */}
          {username === 'Administrator' && ' - expert'}
        </span>
        <span className="date">{createdAt}</span>
      </div>
      <p className="comment">{comment}</p>
    </div>
  );
}

3. Vue 3 (Composition API) #

For Vue, use the v-if directive to conditionally render the tag:

<template>
  <div class="work-note">
    <img :src="avatarUrl" :alt="`${username}'s avatar`" class="avatar" />
    <div class="user-info">
      <span class="username">
        {{ username }}
        <span v-if="username === 'Administrator'"> - expert</span>
      </span>
      <span class="date">{{ createdAt }}</span>
    </div>
    <p class="comment">{{ comment }}</p>
  </div>
</template>

<script setup>
defineProps({
  avatarUrl: String,
  username: String,
  createdAt: String,
  comment: String
});
</script>

Quick Notes: #

• Case Sensitivity: The checks above are case-sensitive. If your system might have usernames like administrator (lowercase), adjust the condition to username.toLowerCase() === 'administrator'.
• Backend Option: If you control the backend, you could also modify the response to include the suffix when the username is Administrator. This way, the frontend just renders the text as-is, no extra logic needed.

内容的提问来源于stack exchange，提问作者Kevin W.