jQuery如何实现同一个遮罩层显示不同的内容？

20212

发布于
2023-10-25 河北

更新于
2023-10-25

页面有多个div元素，点击这些div元素将弹出一个遮罩层，遮罩层内显示所点击的对应的内容，请教大佬们该如何用jQuery实现？
具体如下图:

对应代码：

<div class="div-wrapper">
    <div id="d1">div1</div>
    <div id="d2">div1</div>
    <div id="d3">div1</div>
    <div id="d4">div1</div>
</div>

点击div元素弹出的遮罩层根据所点击的div显示对应的内容，如下图：

<div id="target">
    <div class="content">
        <div class="container">
            <h1 class="title">div1</h1>
            <div class="description">
                <p>Hello div1!</p>
            </div>
        </div>
    </div>
</div>

因为后期会有多个div元素，请问大佬们能否做成数据串的形式，点击那个就把对应的数据插入到这个遮罩层框架内

前端 javascript

html5 jquery

阅读 832

5 个回答

得票最新

汝何不上九霄

4.8k61947

发布于
2023-10-25 北京

$("#d1").click(function(){
    $(".title").html(标题1")
    $(".description").html("<p>内容一</p>")
    // 显示遮罩
    $("#target").show();

})


$("#d2").click(function(){
    $(".title").html(标题2")
    $(".description").html("<p>内容二</p>")
    // 显示遮罩
    $("#target").show();

})

XiongMiao

6391415

发布于
2023-10-26 云南

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="div-wrapper">
    <div id="d1">div1</div>
    <div id="d2">div2</div>
    <div id="d3">div3</div>
    <div id="d4">div4</div>
  </div>
  <div id="target">
    <div class="content">
      <div class="container">
        <h1 class="title">div1</h1>
        <div class="description">
          <p>Hello div1!</p>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$('.div-wrapper').children().each(function() {
  let text = $(this).text()
  $(this).on('click', function() {
    console.log(text)
    $('#target .title').text(text)
    $('#target .description').text(`Hello ${text}`)
  })
})

</script>
<style>
.div-wrapper>div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 40px;
  border: 1px solid black;
  margin: 10px;
  cursor: pointer;
}
</style>

</html>

TANKING

4.8k21355

发布于
2023-10-26 广东

简单实现了下~

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            .modal {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                align-items: center;
                justify-content: center;
            }

            .modal-content {
                width: 500px;
                height: 300px;
                background-color: #fff;
                margin: 100px auto 0;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button data-id="1" onclick="getContent(this)">遮罩层1</button>
            <button data-id="2" onclick="getContent(this)">遮罩层2</button>
            <button data-id="3" onclick="getContent(this)">遮罩层3</button>
        </div>

        <div id="modal" class="modal">
            <div id="modal-content" class="modal-content"></div>
        </div>
    </body>

    <script type="text/javascript">

        // modal内容
        const dataArray = [
            {'id':1,'content':'遮罩层1内容'},
            {'id':2,'content':'遮罩层2内容'},
            {'id':3,'content':'遮罩层3内容'}
        ];

        // 获取modal内容
        function getContent(e) {

            // 获取data-id属性的值
            const dataId = e.getAttribute('data-id');

            // 使用dataId值查找相应的content
            const contentItem = dataArray.find(item => item.id == dataId);

            if (contentItem) {
                const content = contentItem.content;

                // 获取模态框元素
                const modal = document.getElementById('modal');
                const modalContent = document.getElementById('modal-content');

                // 设置模态框内容
                modalContent.innerHTML = content + '<button onclick="closeModal()">关闭</button>';

                // 显示模态框
                modal.style.display = 'block';
            }
        }

        // 关闭
        function closeModal() {
            const modal = document.getElementById('modal');
            modal.style.display = 'none';
        }

    </script>
</html>

抱歉_你想多了

8431828

发布于
2023-10-26 浙江

    <div class="div-wrapper>
        <div id="d1">
            <div class="container hide" >
                <h1 class="title">d1</h1>
                <div class="description">Hello div1</div>
            </div>
        </div>
    <div>
  

  document.querySelectorAll(".div-wrapper>[id]").forEach(dom => {
      dom.onclick = (e) => {
          // 从页面拿到 DOM，直接输出
          // 要写 node 很多 node
          const $temp = e.target.parentNode.querySelector(".hide"));
          const $dom = $($temp).copy();

          // 从模板拿到 DOM，调整内容后输出
          // 要写 json 数据源
          const key = e.parentNode.id;
          const $temp = $("#template").copy();
          $temp.querSelector('.title').innrText = dataList[key].title;
          $temp.querSelector('.description').innrText = dataList[key].description;

          // 丢到对应的dom
          document.querySelector("#mask>content").innerHTML = $dom;
          $("#mask").remolveClass('hide');
      }
  })

花开浅夏

75629

发布于
2023-10-26 湖北

<!DOCTYPE html>
<html>
<head>
    <style>
        .div-wrapper {
            display: flex;
        }
        .div-wrapper div {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
            cursor: pointer;
        }
        #overlay {
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        #overlay-content {
            background: white;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="div-wrapper">
        <div id="d1" onclick="handleDivClick(event)">div1</div>
        <div id="d2" onclick="handleDivClick(event)">div2</div>
        <div id="d3" onclick="handleDivClick(event)">div3</div>
        <div id="d4" onclick="handleDivClick(event)">div4</div>
        <div id="d5" onclick="handleDivClick(event)">div5</div>
        <!-- Add more div elements here -->
    </div>

    <div id="overlay">
        <div id="overlay-content"></div>
    </div>

    <script>
        function handleDivClick(event) {
            var target = event.target;
            if (target.matches('div')) {
                showOverlay(target.innerText);
            }
        }

        function showOverlay(content) {
            var overlay = document.getElementById('overlay');
            var overlayContent = document.getElementById('overlay-content');
            overlay.style.display = 'flex';
            overlayContent.innerText = content;
        }

        var overlay = document.getElementById('overlay');
        overlay.onclick = function() {
            this.style.display = 'none';
        };
    </script>
</body>
</html>

这样应该可以解决你的需求

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

jQuery如何实现同一个遮罩层显示不同的内容？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？