Question

我是asp.net和javascript（第一个项目）的新手，所以它可能非常简单。我有http://do-web.com/jcontent/demo提供的垂直滑块。在每个div中都有可单击的div，单击它们时应更新文本框的值。

如果文本框位于垂直滑块之外，则此工作非常有效。

但是我希望文本框在最后一张幻灯片上。当我把它们放在这里时，只有最后一个文本框被更新，无论有多少幻灯片（下面的例子只有两个，但已尝试过6，它只是最后一个更新的文本框。

我还想在文本框中添加必填字段验证，但当它们位于滑块内时，这不起作用。

我认为存在一些我不知道的范围问题。希望有人能指出我正确的方向。

以下是代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/jcontent.css" rel="stylesheet" type="text/css"/>
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.min.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.jcontent.0.8.min.js"></script>    
    <script type="text/javascript">
        $("document").ready(function () {
            $("div#demo").jContent({
                orientation: 'vertical',
                width: 960,
                height: 360,
                easing: "easeOutCirc"
            });
        });
    </script> 
    <script>
        function option(i, x) {
            $(i).val(x);
        }
    </script>
</head>
<body>    
    <form id="form1" runat="server">
        <div id="page">       
            <div id="main">     
                <div id="demo">
                    <a title="" href="#" class="prev" style="font:12px arial black; width:50px; left:0px; margin-right:425px;">PREV</a>
                    <a title="" href="#" class="next" style="font:12px arial black; width:50px; right:0px; margin-left:425px;">NEXT</a>                    
                    <div class="slides" style="border-top:solid 1px #0078AD">
                        <div style="position:relative;">
                            <div class="title">Jack Size</div>
                            <div id="slide1option1" onclick="option('.option1t','C00');" style="position:absolute; top:20px; left:0; height:340px; width:480px; cursor:pointer;">
                                <img id="C00" src="images/slides/slide1_1.jpg" onmouseover="this.src='images/slides/slide1_1_focus.jpg'" onmouseout="this.src='images/slides/slide1_1.jpg'" border="0"/>
                            </div>
                            <div id="slide1option2" onclick="option('.option1t','C01')" style="position:absolute; top:20px; left:240px; height:340px; width:480px; cursor:pointer;">
                                <img id="C01" src="images/slides/slide1_2.jpg" onmouseover="this.src='images/slides/slide1_2_focus.jpg'" onmouseout="this.src='images/slides/slide1_2.jpg'" border="0"/>
                            </div>
                        </div>
                        <div style="position:relative;">
                            <div class="title">Jack Type</div>
                            <div id="slide2option1" onclick="option('.option2t','TS')" style="position:absolute; top:20px; left:0; height:340px; width:480px; cursor:pointer;">
                                <img id="TS" src="images/slides/slide2_1.jpg" onmouseover="this.src='images/slides/slide2_1_focus.jpg'" onmouseout="this.src='images/slides/slide2_1.jpg'" border="0"/>
                            </div>
                            <div id="slide2option2" onclick="option('.option2t','KS')" style="position:absolute; top:20px; left:320px; height:340px; width:480px; cursor:pointer;">
                                <img id="KS" src="images/slides/slide2_2.jpg" onmouseover="this.src='images/slides/slide2_2_focus.jpg'" onmouseout="this.src='images/slides/slide2_2.jpg'" border="0"/>
                            </div>
                        </div>      
                        <div style="position:relative;">
                            <asp:TextBox id="TextBox1" class="option1t" runat="server" Width="30px"></asp:TextBox>   
                            <asp:TextBox id="TextBox2" class="option2t" runat="server" Width="30px"></asp:TextBox>
                        </div>
                    </div>                                                                            
                </div>  

            </div> 
        </div>
    </form>
</body>
</html>

Answer 1

这是因为当您点击滑块中的next / prev时，幻灯片会从DOM中移除并附加或预先添加到滑块的其他位置。

所以你点击第一页上的按钮。您的文本框更新得很好，但是当您切换幻灯片时，它们会被重新创建并被视为两个全新的完全空文本框。

您需要将选项存储在其他位置，并在实际访问该幻灯片时填充文本框。有多种方法可以将它存储在数据属性，隐藏输入字段或全局javascript数组中。

我使用了下面示例中的最后一个：

<强> HTML

将您的onclick更改为：

onclick="option('option1t','C01')"

注意我在.之前删除了option1t。

<强> JS

每次点击selected时，我都会在文本框中填入Next数组中存储的选项。

var selected = [];

function option(i, x) {
    selected[i] = x;
}

$("document").ready(function () {

    $("div#demo").jContent({
        orientation: 'vertical',
        width: 360,
        height: 360,
        easing: "easeOutCirc"
    });

    $('.next').click(function () {
        if (typeof selected['option1t'] != 'undefined') {
            $('.option1t').val(selected['option1t']);
        }
        if (typeof selected['option2t'] != 'undefined') {
            $('.option2t').val(selected['option2t']);
        }
    });
});

你会找到一个演示here

无法在javascript滑动div中设置文本框值

1 个答案: