0

そのため、Webページで押された画像に応じてページを再配置しようとしています。私は直前にコードを持っていましたが、修正するために100のことをしなければならなかったため、もう機能していません。誰でも理由を理解できますか？

cloudybubble.pngそのため、現在ページにある画像をクリックすると、 に移動しますcloudy_name.php。また、それを行うために他のページに移動する他の画像もあります。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WhethertheWeather</title>

<!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />-->
        <script src="http://www.adrianpelletier.com/mint/?js" type="text/javascript"></script>
        <script type="text/javascript" src="demo/scripts/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="demo/scripts/jquery-ui-1.7.1.custom.min.js"></script>
        <script type="text/javascript" src="demo/scripts/execute.js"></script>


<script>
    function showWeather(_Weather) {
     //alert(Weather);
        myform._Weather.value=Weather;
    //  alert(Weather);

    // ._Weather
        myform.submit();



        }

    $(document).ready(function() {
        $('cloudybubble.png').click(function() {
            window.location="http://http://www.tcnjart.com/christineaustin/whethertheweather/cloudy_name.php;"
        });
    });

    // window.location="http://http://www.tcnjart.com/christineaustin/whethertheweather/cloudy_name.php"; //
</script>


</script>


<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body background="images/gradientsky.jpg"> 



<div id="weather">

<ul id="nav-reflection">
<form method="post" action="cloudy_name.php" id="myform">
        <li class="button-color-1"><a href="javascript:showWeather('cloudy')"; title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>

    <input type="hidden" name="weather" value="whatever">
</form>
</ul>
</div>

</body>
</html>

新しいスクリプト

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WhethertheWeather</title>

<!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />-->
        <script src="http://www.adrianpelletier.com/mint/?js" type="text/javascript"></script>
        <script type="text/javascript" src="demo/scripts/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="demo/scripts/jquery-ui-1.7.1.custom.min.js"></script>
        <script type="text/javascript" src="demo/scripts/execute.js"></script>


<script>
    function showWeather(_Weather) {
     //alert(Weather);
        myform._Weather.value=Weather;
    //  alert(Weather);

    // ._Weather
        myform.submit();



        }

    $('#cloudybubble').click(function() {
    window.location = "http://http://www.tcnjart.com/christineaustin/whethertheweather/cloudy_name.php;"
});

</script>


</script>


<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body background="images/gradientsky.jpg"> 



<div id="weather">

<ul id="nav-reflection">
<form method="post" action="cloudy_name.php" id="myform">
        <li class="button-color-1"><a href="javascript:showWeather('cloudy')"; title="My fancy link"><img id="cloudybubble" src="images/cloudybubble.png" width="211" height="180" align="left" />
</a></li>

    <input type="hidden" name="weather" value="whatever">
</form>
</ul>
</div>

</body>
</html>
4

3 に答える 3

1

編集：コメントの新しい情報を説明するために改訂されました。

これをページのすべての画像に対して一般的に機能させることができるため、同じ JavaScript を使用できます。

HTML で、ハイパーリンクを a タグに戻します。次に、タグにクラスを追加します。「weatherLink」をお勧めします。次に、データベースに記録したいテキスト、つまり "cloudy" を入力し、それをリンクの ID にします。

HTML:

<li class="button-color-1">
    <a id="cloudy" class="weatherLink" href="http://www.tcnjart.com/christineaustin/whethertheweather/cloudy_name.php" title="My fancy link">
        <img src="images/cloudybubble.png" width="211" height="180" align="left" />
    </a>
</li>

ここで、JavaScript の jQuery クリック ハンドラを次のように更新する必要があります。

JavaScript:

$(document).ready(function () {
    $('a.weatherLink').click(function (e) {
        e.preventDefault();
        showWeather(this.id);
        window.location.href = this.href;
        return false;
    });
});

ここで、他の画像を追加する場合は、ハイパーリンクを a タグに残し、weatherLink クラスを指定し、showWeather() に渡すことができる一意の ID を指定します。適切な HTML があれば、これ以上 JavaScript を複製する必要はありません。

結果を確認するための jsFiddle テスト ページは次のとおりです: http://jsfiddle.net/willslab/jkB9z/9/

于 2012-04-22T19:07:34.417 に答える
0

タグに を追加しidてimg、セレクターで使用します。

于 2012-04-22T19:08:04.767 に答える
0

あなたは間違いなくサーバー側でそれを行うべきです。

ユーザーが JavaScript を持っていない場合はどうなりますか? 私を信じてください、それらはたくさんあります（主にセキュリティ上の理由から）。

フォームのアクションを PHP ページに定義し、必要な変更または w/e を処理し、それに応じてユーザーをリダイレクトします ( を使用header('Location: http://www.hi.com');)。

于 2012-04-22T21:06:42.123 に答える