Question

我在页面上动态创建了元素，图片和三个按钮，这些按钮是在单击主按钮时创建的。

所有这一切都有效，但现在我尝试将动态创建的#include <boost/asio/io_service.hpp> #include <boost/asio/write.hpp> #include <boost/asio/read.hpp> #include <boost/log/trivial.hpp> #include <boost/system/error_code.hpp> #include <boost/thread.hpp> #include "udt/connected_protocol/logger/file_log.h" #include "udt/ip/udt.h" int main() { using udt_protocol = ip::udt<>; using Buffer = std::array<uint8_t, 100000>; using SendHandler = std::function<void(const boost::system::error_code&, std::size_t)>; using ReceiveHandler = std::function<void(const boost::system::error_code&, std::size_t)>; using ConnectHandler = std::function<void(const boost::system::error_code&)>; boost::asio::io_service io_service; boost::system::error_code resolve_ec; Buffer buffer1; Buffer r_buffer1; udt_protocol::socket socket(io_service); udt_protocol::resolver resolver(io_service); udt_protocol::resolver::query client_udt_query("127.0.0.1", "34567"); auto remote_endpoint_it = resolver.resolve(client_udt_query, resolve_ec); if (resolve_ec) { BOOST_LOG_TRIVIAL(error) << "Wrong arguments provided"; return 1; } udt_protocol::endpoint remote_endpoint(*remote_endpoint_it); ConnectHandler connected; SendHandler sent_handler; ReceiveHandler received_handler; connected = [&](const boost::system::error_code& ec) { if (!ec) { BOOST_LOG_TRIVIAL(trace) << "Connected"; boost::asio::async_write(socket, boost::asio::buffer(buffer1), sent_handler); } else { BOOST_LOG_TRIVIAL(trace) << "Error on connection : " << ec.value() << " " << ec.message(); } }; sent_handler = [&](const boost::system::error_code& ec, std::size_t length) { if (ec) { BOOST_LOG_TRIVIAL(trace) << "Error on sent : " << ec.value() << " " << ec.message(); return; } else { std::cout << "sent " << length << " bytes" << std::endl; } boost::asio::async_write(socket, boost::asio::buffer(r_buffer1), sent_handler); }; socket.async_connect(remote_endpoint, connected); boost::thread_group threads; for (uint16_t i = 1; i <= boost::thread::hardware_concurrency(); ++i) { threads.create_thread([&io_service]() { io_service.run(); }); } threads.join_all(); }上的显示更改为＆＃34;无＆＃34;。

这里出现了不止一个问题，首先我无法了解如何制作div＆＃34;图像＆＃34;目标，或选择它。

我正在尝试使用一个函数为所有元素执行此操作，它们都是相同的结构，只是图片不同。

div

这是相关的代码，第4到第10行。如果这被注释掉，其余的代码可以工作，但是因为它是我在开发工具中得到完全不相关的错误。

点击此链接可查看Codepen。

所以问题是，我怎样才能最好地实现上述代码？

Answer 1

因此，只需处理上面的代码，就可以使其适用于所有实例。首先让我指出：

var elem = document.getElementsByClassName("closingButton") + "[" + arrayPos + "]";

永远不会奏效。该行正在构建一个字符串。你真正想要的是：

var elem = document.getElementsByClassName("closingButton")[arrayPos];

但即使我觉得没必要。看看这段代码。

function hidePic (elem) {
    var finalTarget = elem.getElementsByClassName("images")[0];
    finalTarget.style.display = "none";
}

var closingButtons = document.getElementsByClassName("closingButton");
var index = 0, length = closingButtons.length;
for ( ; index < length; index++) {
    closingButtons[index].addEventListener("click",
        function () {
            hidePic(this);
        }
    );
}

首先查找具有类closingButton的所有元素。然后，对于每一个，我们附加一个click事件监听器。我没有尝试将一些索引传递给这个hidePic函数，而是已经有了我们的函数上下文，这就是你在函数中试图找到的函数，所以我们只需要传递它并使用它来查找里面的图像。

如果您有任何疑问，请与我们联系。我也看了你的codepen。我不确定你是否应该将所有交互式HTML强制转换为按钮元素，这本身被认为是一个交互元素。不确定是否符合HTML规范。也许在按钮下方添加HTML。我打赌当你点击那个按钮里面的内容时，它会注册为按钮上的点击，除非你在插入你的元素时删除了这个事件但是对于你想要在这里做的简单的东西来说它似乎变得太复杂了。

Answer 2

codepen抱怨因为没有＆＃34; closingButton＆＃34;因为它试图在任何事情上都调用addEventListener，但我怀疑这是你所看到的实际错误。

我认为这也是值得的：

var elem = document.getElementsByClassName("closingButton") + "[" + arrayPos + "]",

过度。

var elem = document.getElementsByClassName("closingButton")[arrayPos];

应该足够了。也不是同一行末尾的语法错误：它应该是;而不是,。如果这是您的代码中的错误，它可以解释您为什么会得到＆＃34;无关的错误＆＃34;语法错误可能会导致误导性问题，这些问题应该出现在代码的其他区域！

最后，我强烈推荐使用JQuery来做你的选择魔术 - 它正是它的设计目标。如果您反对使用JS库，那么公平，但它会使您的代码变得更加简单，并且您可以合理地确信它将尽可能以最佳方式执行任务。

许多按钮的一个功能

2 个答案: