無法在javascript滑動div中設置文本框值

Question

我對asp.net和javascript（第一個項目）非常陌生，因此可能很簡單。 我有一個http://do-web.com/jcontent/demo垂直滑塊。 每個div內都有可單擊的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 /上next prev這些幻燈片從DOM中刪除，並在其他位置將其追加或添加到滑塊上。

因此，您正在單擊第一頁上的按鈕。 可以很好地更新您的文本框，但是當您切換幻燈片時，將重新創建它們，並認為它們是兩個全新的完全空的文本框。

您需要將選項存儲在其他位置，並在實際進入幻燈片時填充文本框。 通過將其存儲在數據屬性，隱藏的輸入字段中或僅存儲在全局javascript數組中，可以通過多種方式進行。

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

HTML

將您的onclick更改為：

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

注意，我刪除了. 在option1t之前。

JS

在這里，每次單擊“ Next時，我用存儲在selected數組中的選項填充文本框。

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']);
        }
    });
});

您會在這里找到一個演示

無法在javascript滑動div中設置文本框值

問題描述

1 個解決方案

解決方案1
1 已采納 2014-02-07 11:46:52

無法在javascript滑動div中設置文本框值

問題描述

1 個解決方案

解決方案1 1 已采納 2014-02-07 11:46:52

解決方案1
1 已采納 2014-02-07 11:46:52