JQuery 文字转换和恢复
由于本人没有基础学习过来比较困难，唯一的快速方法就是按照自己的意愿去学习。站点上的一些功能涉及到利用 JQuery，所以就逐渐接触了。
博客上有那么一个功能，就是点击三点后弹出的层，选择复制，然后改变文字再自动关闭该层，而文字也自动恢复回没有点击之前的文字。其实就是一个时间差，点击后，文字恢复需要设置的时间长一些，而图层关闭的时间设置短一些，这样看起来就显得点击后复制了地址，改变了文字，自动关闭了层，再次点开又是没有点击前的文字。特意贴上 JQuery 代码和 PHP 代码：
JS
$(document).ready( function (){
$(‘.mobile-menu li span’).click( function (){
$(this).next().next().slideToggle();
$(this).toggleClass(“active”);
$(this).siblings().removeClass(“active”);
});
$(‘figure .title span’).click( function (){
$(this).next().toggle();
});
$(‘.mobile-menu li span’).click( function (){
$(this).next().next().slideToggle();
$(this).toggleClass(“active”);
$(this).siblings().removeClass(“active”);
});
$(‘figure .title span’).click( function (){
$(this).next().toggle();
});
$(“.link-box”).click(function(event) {
$(this).html(“Copies”);
$(document).ready(function() {
setTimeout(function() {
$(“.link-box”).html(“Copy”);
},1000);
});
var timeout = setTimeout(function() {
$(‘.link-box’).hide();
}, 500);
});
});
上述代码同时实现了移动端的菜单点击打开和关闭的效果。
下面的代码就是复制地址的代码：
JS
function copyToClipboard(element) {
var $temp = $(“<input>”);
$(“body”).append($temp);
$temp.val($(element).text()).select();
document.execCommand(“copy”);
$temp.remove();
}
var $temp = $(“<input>”);
$(“body”).append($temp);
$temp.val($(element).text()).select();
document.execCommand(“copy”);
$temp.remove();
}
PHP
<div class=”link-box”>
<div id=”change-<?php the_ID(); ?>” onclick=”copyToClipboard(‘#url-<?php the_ID(); ?>’); document.getElementById(‘change-<?php the_ID(); ?>’);” >Copy</div>
</div>
<div id=”change-<?php the_ID(); ?>” onclick=”copyToClipboard(‘#url-<?php the_ID(); ?>’); document.getElementById(‘change-<?php the_ID(); ?>’);” >Copy</div>
</div>
Last Updated On Feb 14, 2023 At 08:46:32 PM
Author Box
名字：Sunny
注册：Jan 30, 2021
简介：技术菜鸟，拷贝、黏贴代码中 ……
注册：Jan 30, 2021
简介：技术菜鸟，拷贝、黏贴代码中 ……
