时间戳

首页 > 解决方案 > 单击 div 时生成 url 路径 - 纯 JS

javascript - 单击 div 时生成 url 路径 - 纯 JS

问题描述

我正在自己学习，现在我实际上被卡住了。

我想根据选择的卡更改按钮的 URL。目标是在专用于所需产品的配置页面中重定向用户。

我是否通过 ID 识别它们？价值观？我错过的另一件事？我是否在 JS 文件中存储每张卡的 url？还是有更聪明的方法来做到这一点？

也许我应该在进入这个之前清理我的 html 以获得更清洁的东西？

console.log('connected');

const cardBody = document.querySelectorAll('.product_card');
const selectProduct = document.querySelectorAll('.card-body');
const btn = document.querySelector('button');

clickedProduct();

function clickedProduct() {
  for (var i = 0; i < selectProduct.length; i++) {
    selectProduct[i].addEventListener("click", function() {
      (document.querySelector('.active')) ? document.querySelector('.active').classList.remove('active'): '';
      this.classList.add('active');
      btn.classList.remove('disabled');
    });
  };
};
body {
  height: 100vh;
  background: #E0EAFC;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #CFDEF3, #E0EAFC);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #CFDEF3 100%, #E0EAFC 0%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.container-big {
  height: 100vh;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container {
  margin-bottom: 0.5vh;
}

.card {
  border-radius: 1.2vh;
}

.row,
.col-sm-6 {
  margin: inherit;
  padding: inherit;
}

.col-left {
  padding-left: 15px;
  padding-right: 7.5px;
}

.col-right {
  padding-right: 15px;
  padding-left: 7.5px;
}

.col-top {
  padding-top: 15px;
  padding-bottom: 7.5px;
}

.col-bot {
  padding-bottom: 15px;
  padding-top: 7.5px;
}

.product_card:hover {
  border: 1px solid #007bff;
}

.card-body:hover {
  color: #007bff;
}

.active {
  border: 1px solid #007bff;
  color: #007bff;
  border-radius: 1.2vh;
  ;
}

.btn-config {
  align-self: flex-end;
  margin-right: 15px;
  margin-bottom: 15px;
}

ul li {
  list-style: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!--- Font Awesome CDN -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

  <!--- CSS GG ICONS -->
  <link href='https://css.gg/css' rel='stylesheet'>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/product.css">

  <!-- Titre -->
  <title>Choose a product</title>
</head>

<body>

  <div class="container-big">

    <div class="container">
      <div class="card card-box">
        <div class="card-header">Select a product</div>
        <div class="row">
          <div class="col-sm-6 col-left col-top">
            <div class="card product_card">
              <div value="p1" class="card-body">
                <h5 class="card-title">Product 1</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-right col-top">
            <div class="card product_card">
              <div value="p2" class="card-body">
                <h5 class="card-title">Product 2</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 col-left col-bot">
            <div class="card product_card">
              <div value="p3" class="card-body">
                <h5 class="card-title">Product 3</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-right col-bot">
            <div class="card product_card">
              <div value="p4" class="card-body">
                <h5 class="card-title">Product 4</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="btn-config" class="d-inline-block" data-toggle="popover" data-placement="left" data-content="testgsdfzefz" data-trigger="hover">
          <button class="btn btn-outline-primary disabled" style="pointer-events: none;">
            <a href="DYNAMIC-CHANGE">Config</a>
        </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <script type="text/javascript" src="js/sproduct.js"></script>
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

标签： javascripthtmldom

解决方案

看看这篇文章：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

为每张卡片创建一个新的数据属性并输入您指定的 URL。

创建一个 onClick 函数并分配给每张卡片。当卡片被点击时，触发一个函数。使用“this”关键字访问被点击的特定卡片的数据属性。基于此更改按钮的 URL。

这种方式很简单，不需要冗长的 switch 语句。

修改后的 JavaScript：

function clickedProduct() {
for (var i = 0; i < selectProduct.length; i++) {
    selectProduct[i].addEventListener("click", function () {
        document.querySelector(".active")
            ? document.querySelector(".active").classList.remove("active")
            : "";
        btn.setAttribute("href", this.dataset.link);
        this.classList.add("active");
        btn.classList.remove("disabled");
    });
}

}

修改后的 HTML 示例：

<div class="card product_card">
                            <div
                                value="p1"
                                class="card-body"
                                data-link="http://test.com/a"
                            >
                                <h5 class="card-title">Product 1</h5>
                                <p class="card-text">
                                    With supporting text below as a natural
                                    lead-in to additional content.
                                </p>
                            </div>
                        </div>

推荐阅读