Question

我有一个程序可以模拟具有正面图像和背面图像的传单上的折叠效果。我通过dropDownList选择传单。如何在标签中传递背面图像，以便在旋转图像时显示背面的图片？

这是我的dropDownList的HTML：

＆＃13;

<form name="Pictures">
        <select name="dropPic" onchange="selectFront(this.value)">
            <option value="Flyer1pag1.png" value="Flyer1pag2.png">Flyer 1</option>
            <option value="Flyer2pag1.png" value="Flyer1pag2.png">Flyer 2</option>
            <option value="Flyer3pag1.png" value="Flyer1pag2.png">Flyer 3</option>
        </select>
    </form>

＆＃13;

以下是JavaScript中的函数，用于更改有关dropDownList选择的正面图像以及应该采用传单背面图像的函数：

＆＃13;

function selectFront(imgSrc) {
            loadImage(imgSrc);
            var Dim_Slice = document.querySelectorAll(".slice");
            for (var i = 0; i < Dim_Slice.length; i++) {
                Dim_Slice[i].style.backgroundImage = "url(" + imgSrc + ")";
            }
        }

function selectBack(imgSrc) {
            var Dim_Sliceb = document.querySelectorAll(".sliceb");
            for (var i = 0; i < Dim_Sliceb.length; i++) {
                Dim_Sliceb[i].style.backgroundImage = "url(" + imgSrc + ")";
            }
        }

＆＃13;

Answer 1

可以这样做

// assigning values to corresponding keys
const pages = {
  Main: 'Main page',
  Guide: 'Guide page',
  Articles: 'Articles page',
  Forum: 'Forum board',
};

Object.keys(pages).forEach((page) => console.log(page));

在更改事件中，您可以获得以下值

<select id="dropPic">
    <option data-picone="Flyer1pag1.png" data-pictwo="Flyer1pag2.png">Flyer 1</option>
    <option data-picone="Flyer2pag1.png" data-pictwo="Flyer1pag2.png">Flyer 2</option>
    <option data-picone="Flyer3pag1.png" data-pictwo="Flyer1pag2.png">Flyer 3</option>
</select>

检查此链接是否存在类似问题

Can an Option in a Select tag carry multiple values?

Answer 2

您的问题和/或您尝试做的事情并不完全清楚，但我认为这就是您想要的：

<form name="Pictures">
  <select name="dropPic"
    onchange="selectFront(this.value.split(',')[0]);selectBack(this.value.split(',')[1]);">
    <option value="Flyer1pag1.png,Flyer1pag2.png">Flyer 1</option>
    <option value="Flyer2pag1.png,Flyer1pag2.png">Flyer 2</option>
    <option value="Flyer3pag1.png,Flyer1pag2.png">Flyer 3</option>
  </select>
</form>

Answer 3

您不能在选项标记中包含多个值。

如果正面和背面图像的名称仅因页码不同，您可以使用此代码：

＆＃13;

function selectFlyer(name){
	selectFront(name+"pag1.png");
	selectBack(name+"pag2.png");
}
function selectFront(imgSrc) {
    loadImage(imgSrc);
    var Dim_Slice = document.querySelectorAll(".slice");
    for (var i = 0; i < Dim_Slice.length; i++) {
        Dim_Slice[i].style.backgroundImage = "url(" + imgSrc + ")";
    }
}


function selectBack(imgSrc) {
	loadImage(imgSrc);
    var Dim_Sliceb = document.querySelectorAll(".sliceb");
    for (var i = 0; i < Dim_Sliceb.length; i++) {
        Dim_Sliceb[i].style.backgroundImage = "url(" + imgSrc + ")";
    }
}

＆＃13;

<form name="Pictures">
  <select name="dropPic" onchange="selectFlyer(this.value)">
    <option value="Flyer1">Flyer 1</option>
    <option value="Flyer2">Flyer 2</option>
    <option value="Flyer3">Flyer 3</option>
  </select>
</form>

＆＃13;

Answer 4

public class User
{
    public int USER_ID { get; set; }
    public string Username { get; set; }
    public string First_Name { get; set; }
    public string Surname { get; set; }
    public string Email { get; set; }



    public string FullInfo
    {
        get {
            return $"{USER_ID} { Username } { First_Name } { Surname } { Email } ";
            }

    }

}

我可以在<option>标记中传递多个值吗？

4 个答案: