使用javascript检查元素中的子字符串

Question

我在查看H1标签时遇到了麻烦，然后根据所述H1的内容在图片中填充了一个空的div。 我的代码如下：

// DECLARE MEASURMENT STEP IMAGES
var CornerRight = "../product_images/uploaded_images/onecutcornerrightstep2.gif";
var CornerLeft = "../product_images/uploaded_images/onecutcornerleftstep2.gif";
var CutCorners = "../product_images/uploaded_images/cutcornerssquareorrectanglestep2.gif";
var Rounded = "../product_images/uploaded_images/roundedsquareorrectanglestep2.gif";
var TwoCut = "../product_images/uploaded_images/2cutcornersstep2.gif";
var Round = "../product_images/uploaded_images/roundstep2.gif";
var Octagon = "../product_images/uploaded_images/octogonstep2.gif";
var SquareOrRectangle = "../product_images/uploaded_images/squareorrectanglestep2.gif";

// PLACE IMAGES
if ($( ".product h1:contains('Corner Right')" )) {
    $( ".measurement-image" ).append("<img src=\"" + CornerRight + "\" />");
} else if ($( ".product h1:contains('Corner Left')" )) {
    $( ".measurement-image" ).append("<img src=\"" + CornerLeft + "\" />");
} else if ($( ".product h1:contains('Cut Corners')" )) {
    $( ".measurement-image" ).append("<img src=\"" + CutCorners + "\" />");
} else if ($( ".product h1:contains('Rounded')" )) {
    $( ".measurement-image" ).append("<img src=\"" + Rounded + "\" />");
} else if ($( ".product h1:contains('Two Cut')" )) {
    $( ".measurement-image" ).append("<img src=\"" + TwoCut + "\" />");
} else if ($( ".product h1:contains('Octagon')" )) {
    $( ".measurement-image" ).append("<img src=\"" + Octagon + "\" />");
} else if ($( ".product h1:contains('Square or Rectangle')" )) {
    $( ".measurement-image" ).append("<img src=\"" + SquareOrRectangle + "\" />");
} else {
    $( ".measurement-image" ).append("<img src=\"" + Round + "\" />");
}

每次我运行它时，无论H1的实际内容如何，​​第一个条件（右角）都会恢复为真。

Answer 1

正如@linstantnoodles所说，您只是在检查数组是否存在，而不是在数组内部是否包含元素

另外，为什么不减少变量的数量并创建包含所有检查的单个对象呢？ 这是我建议的返工：

var measureSteps = [
    cornerRight: {
        name: "Corner Right",
        src: "../product_images/uploaded_images/onecutcornerrightstep2.gif";
    },
    cornerLeft: {
        name: "Corner Left",
        src: "../product_images/uploaded_images/onecutcornerleftstep2.gif";
    },
    cornerRight: {
        name: "Cut Corners",
        src: "../product_images/uploaded_images/cutcornerssquareorrectanglestep2.gif";
    },
    /* ETC, ETC */
];

//Iterate through each value in the "measureSteps" object, checking if it is contained in h1
var headerText = $('.product h1').text(); //Only do a jQuery matching search once
$.each(measureSteps, function(i, v) {
    if ( headerText.indexOf(v.name) > -1 ) {
        $( ".measurement-image" ).append("<img src='" + v.src + "' />");
        return false; //Stop iterating - we've successfully found the right text!
    }
});

Answer 2

您需要检查结果（数组）的长度 。 所有对象在JavaScript中都是真实的。

例如：

if ([]) {
  console.log("Hello");
}
// Prints "Hello"