如何使用 JavaScript 创建链接？

Question

在此函数中，我创建了一个具有各种值的 DIV。

showIn(calendar) {
        if (
            this.date < dateString(calendar.weekStart) ||
            this.date > dateString(calendar.weekEnd)
        ) {
            $(`#${this.id}`).remove();
            return;
        }
        let eventSlot;
        if ($(`#${this.id}`).length) {
            eventSlot = $(`#${this.id}`);
        } else {
            eventSlot = $("<div></div>")
                .addClass("event")
                .attr("id", this.id)
                .click(() => this.clickIn(calendar));
        }

        let textoutput = this.sus + "-" + this.description;
        eventSlot
            .text(textoutput)
            .css("backgroundColor", `var(--color-${this.color})`)
            .css("white-space", "nowrap")
            .css("position", "relative")
            .appendTo(`.day[data-dayIndex=${this.dayIndex}] .slot[data-hour=${this.startHour}]`);
    }

现在我想将文本显示为链接，而不是我在这些行中定义的文本。

let textoutput = this.sus + "-" + this.description;
        eventSlot
            .text(textoutput)

我尝试使用 .href() 、 setAttribute 等。不幸的是我无法得到我想要的结果。

Answer 1

您需要重命名标签：

(function($) {
  $.renameTag = function($el, tagName) {
    $el.wrap('<' + tagName + '>');
    var $newElement = $el.parent();
    $.each($el.prop('attributes'), function() {
        $newElement.attr(this.name,this.value);
    });
    $el.contents().unwrap();       
    return $newElement;
}
})(jQuery);

const $myDiv = $('<div>');
const $myAnchor = $.renameTag($eventSlot, 'a'); // Converted

演示

这是一个适合您场景的演示：

(function($) {
  $.renameTag = function($el, tagName) {
    $el.wrap('<' + tagName + '>');
    var $newElement = $el.parent();
    $.each($el.prop('attributes'), function() {
        $newElement.attr(this.name,this.value);
    });
    $el.contents().unwrap();       
    return $newElement;
}
})(jQuery);

const dateString = (str) => new Date(str);

const main = () => {
  const calendar = new Calendar({
    weekStart: '2024-05-05',
    weekEnd: '2024-05-11'
  });
  
  const event = new Event({
    id: 'event-01',
    date: new Date('2024-05-09T12:00:00'),
    description: 'Special Event!',
    sus: 'FOO'
  });
  
  event.showIn(calendar);
};

class Event {
  constructor({ id, date, description, sus, color = 'primary' } = {}) {
    this.id = id;
    this.date = date;
    this.description = description;
    this.color = color;
    this.sus = sus;
    
    this.dayIndex = date.getDay();
    this.startHour = date.getHours();
  }
  showIn(calendar) {
    if (
      this.date < dateString(calendar.weekStart) ||
      this.date > dateString(calendar.weekEnd)
    ) {
      $(`#${this.id}`).remove();
      return;
    }
    let $eventSlot;
    if ($(`#${this.id}`).length) {
      $eventSlot = $(`#${this.id}`);
    } else {
      $eventSlot = $("<div></div>")
        .addClass("event")
        .attr("id", this.id)
        .click(() => this.clickIn(calendar));
    }
    
    let textoutput = this.sus + "-" + this.description;
    
    // Convert the <div> to an <a> tag
    $.renameTag($eventSlot, 'a')
      .text(textoutput)
      .prop('href', '#foobar') // Set to a URL
      .css("backgroundColor", `var(--color-${this.color})`)
      .css("white-space", "nowrap")
      .css("position", "relative")
      .appendTo(`.day[data-dayIndex=${this.dayIndex}] .slot[data-hour=${this.startHour}]`);
  }
}

class Calendar {
  constructor({ weekStart, weekEnd } = {}) {
    this.weekStart = weekStart;
    this.weekEnd = weekEnd;
  }
}

main();

:root {
  --color-primary: lightgreen;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.calendar {
  display: flex;
  flex: 1;
  gap: 0.25rem;
  border: thin solid grey;
  padding: 0.25rem;
}

.day, .slot-header-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}

.slot-header, .day-header, .slot, .spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem;
  border: thin solid grey;
  min-height: 1.25rem;
}

.day-header, .slot-header {
  background: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div id="event-01"></div>

<div class="calendar">
  <div class="slot-header-wrapper">
    <div class="spacer"></div>
    <div class="slot-header">08:00</div>
    <div class="slot-header">09:00</div>
    <div class="slot-header">10:00</div>
    <div class="slot-header">11:00</div>
    <div class="slot-header">12:00</div>
    <div class="slot-header">13:00</div>
    <div class="slot-header">14:00</div>
    <div class="slot-header">15:00</div>
  </div>
  <div class="day" data-dayIndex="0">
    <div class="day-header">Sunday</div>
    <div class="slot" data-hour="8"></div>
    <div class="slot" data-hour="9"></div>
    <div class="slot" data-hour="10"></div>
    <div class="slot" data-hour="11"></div>
    <div class="slot" data-hour="12"></div>
    <div class="slot" data-hour="13"></div> 
    <div class="slot" data-hour="14"></div> 
    <div class="slot" data-hour="15"></div> 
  </div>
  <div class="day" data-dayIndex="1">
    <div class="day-header">Monday</div>
    <div class="slot" data-hour="8"></div>
    <div class="slot" data-hour="9"></div>
    <div class="slot" data-hour="10"></div>
    <div class="slot" data-hour="11"></div>
    <div class="slot" data-hour="12"></div>
    <div class="slot" data-hour="13"></div> 
    <div class="slot" data-hour="14"></div> 
    <div class="slot" data-hour="15"></div> 
  </div>
  <div class="day" data-dayIndex="2">
    <div class="day-header">Tuesday</div>
    <div class="slot" data-hour="8"></div>
    <div class="slot" data-hour="9"></div>
    <div class="slot" data-hour="10"></div>
    <div class="slot" data-hour="11"></div>
    <div class="slot" data-hour="12"></div>
    <div class="slot" data-hour="13"></div> 
    <div class="slot" data-hour="14"></div> 
    <div class="slot" data-hour="15"></div> 
  </div>
  <div class="day" data-dayIndex="3">
    <div class="day-header">Wednesday</div>
    <div class="slot" data-hour="8"></div>
    <div class="slot" data-hour="9"></div>
    <div class="slot" data-hour="10"></div>
    <div class="slot" data-hour="11"></div>
    <div class="slot" data-hour="12"></div>
    <div class="slot" data-hour="13"></div> 
    <div class="slot" data-hour="14"></div> 
    <div class="slot" data-hour="15"></div> 
  </div>
  <div class="day" data-dayIndex="4">
    <div class="day-header">Thursday</div>
    <div class="slot" data-hour="8"></div>
    <div class="slot" data-hour="9"></div>
    <div class="slot" data-hour="10"></div>
    <div class="slot" data-hour="11"></div>
    <div class="slot" data-hour="12"></div>
    <div class="slot" data-hour="13"></div> 
    <div class="slot" data-hour="14"></div> 
    <div class="slot" data-hour="15"></div> 
  </div>
  <div class="day" data-dayIndex="5">
    <div class="day-header">Friday</div>
    <div class="slot" data-hour="8"></div>
    <div class="slot" data-hour="9"></div>
    <div class="slot" data-hour="10"></div>
    <div class="slot" data-hour="11"></div>
    <div class="slot" data-hour="12"></div>
    <div class="slot" data-hour="13"></div> 
    <div class="slot" data-hour="14"></div> 
    <div class="slot" data-hour="15"></div> 
  </div>
  <div class="day" data-dayIndex="6">
    <div class="day-header">Saturday</div>
    <div class="slot" data-hour="8"></div>
    <div class="slot" data-hour="9"></div>
    <div class="slot" data-hour="10"></div>
    <div class="slot" data-hour="11"></div>
    <div class="slot" data-hour="12"></div>
    <div class="slot" data-hour="13"></div> 
    <div class="slot" data-hour="14"></div> 
    <div class="slot" data-hour="15"></div> 
  </div>
</div>