jQuery可选择彩色标签-jquery案例-前端日记簿

首页 jquery案例正文

jQuery可选择彩色标签

2023-10-27 83

效果图：

点击左上角的颜色方块可以对我们的标签进行颜色的更改在输入框中输入文字通过回车键进行标签的添加

并且点击标签可以对标签进行删除

html：

<ul class="colors">
      <span>tag Color</span>
      <li style="background: #f95"></li>
      <li style="background: #6ad"></li>
      <li style="background: #e77"></li>
      <li style="background: #6c7"></li>
      <li style="background: #aaa"></li>
    </ul>
    <div class="box">
      <p>回车键确认创建标签</p>
      <div class="lists">
        <span class="tag">such tage</span>
        <span class="tag">add</span>
        <span class="tag">such tage</span>
        <input type="text" placeholder="add tag" class="input" />
      </div>
    </div>

css：

 * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .colors {
        display: flex;
        padding: 10px;
      }
      .colors span {
        margin-top: 5px;
        display: block;
        margin-right: 10px;
      }
      .colors li {
        user-select: none;
        cursor: pointer;
        width: 15px;
        height: 15px;
        margin-right: 6px;
        margin-top: 8px;
      }
      .colors li:first-child {
        margin-left: 10px;
      }
      .lists {
        box-sizing: border-box;
        width: 600px;
        padding: 20px;
        background-color: rgb(217, 146, 98);
        border-radius: 20px;
        margin: auto;
        transform: translateY(150%);
      }
      .box p {
        margin-top: 20px;
        text-align: center;
        font-size: 28px;
      }
      .lists .tag {
        text-align: center;
        z-index: 99;
        display: inline-block;
        user-select: none;
        border-radius: 20px;
        margin-left: 1%;
        margin-bottom: 5px;
        width: 19%;
        height: 35px;
        line-height: 35px;
        cursor: pointer;
        background: rgb(87, 158, 212);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        color: #fff;
        font-size: 16px;
      }
      .lists .input {
        width: 150px;
        display: inline-block;
        border: none;
        outline: none;
        background: none;
        padding: 10px;
        font-size: 18px;
        color: #fff;
      }

      .lists .input:-webkit-input-placeholder {
        color: #eee;
      }

js：

首先将我们点击颜色方块时候先获取到点击的颜色值并进行打印查看

预览：

紧接着可以将为您获取到的颜色给标签的背景通过css()进行添加

这里在删除我们标签的时候因为标签可以动态的去添加所以我们这个时候需要使用到监听添加的span标签的dom

点击删除对应的标签

最后去监听当键盘在input获取焦点的时候函数中传入event 通过if去判断keycode值是否为13 也就是回车键的keycode编码

进入if循环获取input的val 将它打印查看、

预览：

当输入的字符串长度大于零时我们创建一个新标签将获取到的值添加进去通过:last去找到类.tag最后一个元素

通过after在它后面添加标签这里不使用append是因为这个方法是在选中元素的内部进行添加相当于添加子元素

我们这里是类似于添加兄弟元素

小于零时进行提示

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>彩色标签</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .colors {
        display: flex;
        padding: 10px;
      }
      .colors span {
        margin-top: 5px;
        display: block;
        margin-right: 10px;
      }
      .colors li {
        user-select: none;
        cursor: pointer;
        width: 15px;
        height: 15px;
        margin-right: 6px;
        margin-top: 8px;
      }
      .colors li:first-child {
        margin-left: 10px;
      }
      .lists {
        box-sizing: border-box;
        width: 600px;
        padding: 20px;
        background-color: rgb(217, 146, 98);
        border-radius: 20px;
        margin: auto;
        transform: translateY(150%);
      }
      .box p {
        margin-top: 20px;
        text-align: center;
        font-size: 28px;
      }
      .lists .tag {
        text-align: center;
        z-index: 99;
        display: inline-block;
        user-select: none;
        border-radius: 20px;
        margin-left: 1%;
        margin-bottom: 5px;
        width: 19%;
        height: 35px;
        line-height: 35px;
        cursor: pointer;
        background: rgb(87, 158, 212);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        color: #fff;
        font-size: 16px;
      }
      .lists .input {
        width: 150px;
        display: inline-block;
        border: none;
        outline: none;
        background: none;
        padding: 10px;
        font-size: 18px;
        color: #fff;
      }

      .lists .input:-webkit-input-placeholder {
        color: #eee;
      }
    </style>
  </head>
  <body>
    <ul class="colors">
      <span>tag Color</span>
      <li style="background: #f95"></li>
      <li style="background: #6ad"></li>
      <li style="background: #e77"></li>
      <li style="background: #6c7"></li>
      <li style="background: #aaa"></li>
    </ul>
    <div class="box">
      <p>回车键确认创建标签</p>
      <div class="lists">
        <span class="tag">such tage</span>
        <span class="tag">add</span>
        <span class="tag">such tage</span>
        <input type="text" placeholder="add tag" class="input" />
      </div>
    </div>
  </body>
</html>
<script src="./js/jquery.js"></script>
<script>
  $(".colors li").click(function () {
    let textColor = $(this).css("backgroundColor");
    console.log(textColor);
    $(".tag").css("backgroundColor", textColor);
  });
  $(".lists").on("click", ".tag", function () {
    $(this).remove();
  });
  $(".input").keydown(function (e) {
    if (e.keyCode == "13") {
      let val = $(this).val();
      console.log(val);
      if (val.length > 0) {
        let p = ` <span class="tag">${val}</span>`;
        console.log(p);
        $(".lists .tag:last").after(p);
        $(this).val("");
      } else {
        alert("请输入内容");
      }
    }
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=154

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。