我希望用户如果单击“复制”，将分别激活一个功能。你能在 JQuery 上做到这一点吗？-解网

问：

如果用户单击第一个框中的“复制”按钮，则将激活函数 CopyA（）。然后在第二个盒子上使用 CopyB（），依此类推。确保首先单击“查看更多”以显示“复制”按钮。

下面的代码在下半部分有 4 个函数，即 CopyA（）;CopyB（）、CopyC（）和 CopyD（）。如果用户分别单击“复制”，我想将它们一一功能化。

// Array containing the content for each box

const fullContents = [
  'This is the Full First box content',
  'This is the Full Second box content',
  'This is the Full third box content',
  'This is the Full fourth box content'
];
const boxContents = [
  'This is the first box content',
  'This is the second box content',
  'This is the third box content',
  'This is the fourth box content'
];

// Function to toggle content visibility and button text
function toggleContent(index) {
  const boxContent = $('.content p').eq(index);
  const seeMoreBtn = $('.SM').eq(index);
  const copyBtn = $('.Copy').eq(index);
  if (seeMoreBtn.text() === 'See More') {
    boxContent.text(fullContents[index]);
    seeMoreBtn.text('See Less');
    copyBtn.show();
  } else {
    boxContent.text(boxContents[index]);
    seeMoreBtn.text('See More');
    copyBtn.hide();
  }
}
// Click event for "See More" buttons
$('.wrapper').on('click', '.SM', function() {
  const index = $('.SM').index(this);
  toggleContent(index);
});
// Function to generate the dynamic markup for boxes
function generateBoxes() {
  const wrapper = $('.wrapper');
  // Iterate through boxContents array and create the markup for each box
  for (let i = 0; i < boxContents.length; i++) {
    const boxMarkup = `
                <div class="box">
                    <div class="content">
                      <p>null</p>
                    </div>
                    <div class="BTN">
                        <button class="SM">See More</button>
                        <button class="Copy">Copy</button>
                    </div>
                </div>
            `;
            
    // EDIT: added this
    wrapper.append(boxMarkup)
  }
}

// When the document is ready, generate the boxes and enable the functionality
$(document).ready(function() {
  generateBoxes();
  let elements = document.getElementsByClassName('SM');
  for (let i = 0; i < elements.length; i++) {
    elements[i].click();
    setTimeout(function() {
      elements[i].click();
    }, 1);
  }
});
//THIS IS MY PROBLEM   
//IF YOU CLICK THE COPY ON FIRST BOX, THE CopyA() will be activated
//Can you create a code on JQuery on "Click Copy Event?"
function CopyA() {
  alert("You Copy 1");
  //The alert is an example only. I want to change that code if I trasnfer on my web.
}

function CopyB() {
  alert("You Copy 2");
}

function CopyC() {
  alert("You Copy 3");
}

function CopyD() {
  alert("You Copy 4");
}

* {
  margin: 0;
  padding: 0;
  outline: none;
}

body {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  width: 90%;
  display: flex;
  flex-direction: column;
}

.box {
  height: 180px;
  background: blue;
  width: 100%;
  margin-top: 10px;
}

.content {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content p {
  font-size: 22px;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  width: 100%;
}

.BTN {
  position: relative;
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  height: 32px;
  margin-top: -37px;
}

.BTN button {
  height: 100%;
  width: 100%;
  font-size: 18px;
  background: yellow;
  color: red;
  font-weight: bold;
  border: none;
  border-radius: 5px;
}

.Copy {
  display: none;
}

@media(min-width: 600px) {
  .wrapper {
    flex-direction: row;
    gap: 10px;
  }
}

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

<head>
  <meta charset="UTF-8">
  <title>Page title</title>
  <meta name="viewport" content="width=device-width, initial-cale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <div class="wrapper">
  </div>
</body>

</html>

jQuery 函数索引

// Array containing the content for each box

const fullContents = [
  'This is the Full First box content',
  'This is the Full Second box content',
  'This is the Full third box content',
  'This is the Full fourth box content'
];
const boxContents = [
  'This is the first box content',
  'This is the second box content',
  'This is the third box content',
  'This is the fourth box content'
];

// Function to toggle content visibility and button text
function toggleContent(index) {
  const boxContent = $('.content p').eq(index);
  const seeMoreBtn = $('.SM').eq(index);
  const copyBtn = $('.Copy').eq(index);
  if (seeMoreBtn.text() === 'See More') {
    boxContent.text(fullContents[index]);
    seeMoreBtn.text('See Less');
    copyBtn.show();
  } else {
    boxContent.text(boxContents[index]);
    seeMoreBtn.text('See More');
    copyBtn.hide();
  }
}

// Function to generate the dynamic markup for boxes
function generateBoxes() {
  const wrapper = $('.wrapper');
  // Iterate through boxContents array and create the markup for each box
  for (let i = 0; i < boxContents.length; i++) {
    const boxMarkup = `
        <div class="box">
            <div class="content">
              <p>null</p>
            </div>
            <div class="BTN">
                <button class="SM">See More</button>
                <button class="Copy">Copy</button>
            </div>
        </div>
    `;

    // EDIT: added this
    var dict = 'ABCD'.split('');
    var elem = $(boxMarkup);
    elem.find('.content p').text(boxContents[i]);
    elem.find(".Copy").click(function() {
      var foo = "Copy" + dict[i];
      eval(foo + '()');
    });
    wrapper.append(elem)
  }
}

// When the document is ready, generate the boxes and enable the functionality
$(document).ready(function() {
  generateBoxes();

  // Click event for "See More" buttons
  $('.wrapper').on('click', '.SM', function(elem) {
    const index = $('.SM').index(this);
    toggleContent(index);
    //toggleContent(elem);
  });


});

function CopyA() {
  alert("You Copy 1");
  //The alert is an example only. I want to change that code if I trasnfer on my web.
}

function CopyB() {
  alert("You Copy 2");
}

function CopyC() {
  alert("You Copy 3");
}

function CopyD() {
  alert("You Copy 4");
}

* {
  margin: 0;
  padding: 0;
  outline: none;
}

body {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  width: 90%;
  display: flex;
  flex-direction: column;
}

.box {
  height: 180px;
  background: blue;
  width: 100%;
  margin-top: 10px;
}

.content {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content p {
  font-size: 22px;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  width: 100%;
}

.BTN {
  position: relative;
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  height: 32px;
  margin-top: -37px;
}

.BTN button {
  height: 100%;
  width: 100%;
  font-size: 18px;
  background: yellow;
  color: red;
  font-weight: bold;
  border: none;
  border-radius: 5px;
}

.Copy {
  display: none;
}

@media(min-width: 600px) {
  .wrapper {
    flex-direction: row;
    gap: 10px;
  }
}

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

<head>
  <meta charset="UTF-8">
  <title>Page title</title>
  <meta name="viewport" content="width=device-width, initial-cale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <div class="wrapper">
  </div>
</body>

</html>

哎哟，我可以再请你帮个忙吗？如果在 Z 之后，然后我添加函数 CopyAB（）怎么办？因为 AB 将被拆分为两个字符，即 A 和 B，并且函数 CopyA 和 CopyB（）也将被激活。如果我使用函数 CopyAB（），如何在第 27 个框中制作一个函数（在 CopyZ（）之后，因为英文字母表由 26 个字母组成）？先谢谢你。

0赞 IT goldman 8/5/2023

使用数字会更容易。至于它只是一个捷径'ABCD'.split['A', 'B', 'C', 'D']

0赞 Julom Buenmar N 8/5/2023

你是怎么把它放在JQuery上的？对不起，但截至目前，我不是 JQuery 的专家？

上一个：使用 JS 时，导航链接未绑定到优先级菜单中的“更多”选项响应式标题中的响应宽度

下一个：使用 jquery 和 hammer.js 时出现的问题

我希望用户如果单击“复制”，将分别激活一个功能。你能在 JQuery 上做到这一点吗？

I want the user that if they click the Copy, there's a function will be activated respectively. Can you do this on JQuery?

评论

评论