给定一堆这样的 div：
<div class="itemGrid">
<div id="itemOne" class="fruit">
<span> Banana </span>
</div>
<div id="itemTwo" class="fruit">
<span> Apple </span>
</div>
</div>
我希望能够在单击这些 div 时使用事件委托来获取跨度的值（因此只是文本）。
有了这个，我得到了一切，文本和符号，但我似乎无法只获取跨度内的文本：
const fruitButtons = document.querySelectorAll(".fruit span");
const grid = document.querySelector(".itemGrid");
grid.addEventListener("click", function(e) {
if (e.target.nodeName == "DIV") {
console.log(e.target.textContent)
}
})
我创建了第二十七个主题的子主题。在孩子的主题文件夹中，我有一个“ style.css”和一个“ functions.php”文件。在style.css文件中，我具有：
/*
Theme Name: Personal_theme
Theme URI: http://wordpress:8888/
Description: This is a child theme of twentyseventeen
Author: My name
Author URI: ...
Template: twentyseventeen
Version: 0.1;
*/
.entry-title {
color: blue;
}
并在functions.php内部：
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get("Version")
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
如果我添加“！重要！” 风格，它会变成蓝色。如果使用检查器工具，则可以看到在父级之后加载了子样式表，但是父级覆盖了样式。我是Wordpresss的新手，functions.php中的任何参数是否错误？我必须改变一些东西吗？
在Vue实例中，我有一个名为“ block”的数组，其中包含4个值。我用v-for将此数组渲染为DOM：
<div class="block" @click="shuffleArray()">
<div v-for="(number, index) in block">
<span :class="[`index--${index}`]">{{ number }}</span>
</div>
</div>
这会创建一个内部有4个跨度的div，每个跨度都有一个“ index--0”，“ index--1”等类。
单击时，数组的值更改顺序：
shuffleArray: function() {
const shifted = this.block.shift();
this.block.push( shifted );
}
尽管值确实发生了变化，但它们并未在实际的DOM中移动，如何在单击时实现跨度实际上在DOM中的位置变化？每个跨度都有适用的样式，因此我想用视觉表示值确实会改变顺序：
span.index--0 {
background-color: tomato;
}
span.index--1 {
background-color: khaki;
}
span.index--2 {
background-color:lavenderblush;
}
span.index--3 {
background-color: lightcoral;
}
也许有不需要CSS的纯CSS解决方案。
我正在尝试基于锚导航构建此部分.当我点击一个链接时,我会找到所需的锚点,点击的链接会获得一个具有特定样式的类,到目前为止它运行良好:
HTML
<body>
<nav>
<div class="anchor-link" > <a href="#anchor1" > Anchor 1 </a> </div>
<div class="anchor-link"> <a href="#anchor2"> Anchor 2 </a> </div>
<div class="anchor-link"> <a href="#anchor3"> Anchor 3 </a> </div>
<div class="anchor-link"> <a href="#anchor4"> Anchor 4 </a> </div>
<div class="anchor-link"> <a href="#anchor5"> Anchor 5 </a> </div>
</nav>
<div class="main-wrap">
<div id="anchor1"></div>
<div id="anchor2"></div>
<div id="anchor3"></div>
<div id="anchor4"></div>
<div id="anchor5"></div>
</div>
</body>
JS
$(document).ready(function(){
$(".anchor-link").on("click", function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
现在我想在href中获取值但是这不起作用并返回undefined:
var href = $(this).attr('href');
console.log(href);
})
假设它工作,并且var href保存点击链接的值,例如"#anchor1",我将如何继续然后在"main-wrap"中找到id为"#anchor1"的div ？
这会工作,我将如何填写查找查询？
$(".main-wrap").find(...);
我试图首先获取元素的order属性的值,然后在单击按钮时向其添加1.事情是,而不是获得1并添加1并获得2,我得到11.不应该"+ ="运算符添加值？我究竟做错了什么？
carouselPrev.addEventListener("click", function(){
const firstPost = document.querySelector(".blog-post");
let firstPostOrder = firstPost.style.getPropertyValue('order');
firstPost.style.order = firstPostOrder += 1;
});
我正在尝试找到一种方法来对已添加到数组中的所有数字求和。我相信这应该有效：
var total = 0;
for (var i = 0; i < totalPrice.length; i++);
total += totalPrice[i];
document.getElementById("displayPrice").innerHTML = total;
但总计结果为 NaN。
这是我在 JSFiddle 中的代码示例，如果您添加该项目两次，则该值会被推入数组，我在 for 循环中做错了什么？