1

コード内の text という div を diplay:none; に変更したいと考えています。div "#video-overlay-shadow and #video-overlay" が true であり、画面サイズが 740 の場合は 740 を超えている場合は何もせず、460 未満の場合は何もしません。

$(document).ready(function(){ window
var $window = $(window);

//display nav
var displayHide = true;

//on resize get widths
getWidths();
$window.resize(getWidths);

//set width of content to the needed widths
function getWidths()
{
    var browserWidth = $window.width();

    if ((browserWidth >=740) && (("#video-overlay-shadow, #video-overlay") == true))
    {
        //do somthing

    }
    else if((browserWidth >= 460) && (("#video-overlay-shadow, #video-overlay") == false))
    {
        //do something
    }
    else if((browserWidth < 740) && (("#video-overlay-shadow, #video-overlay") == false))
    {
        //do something
    }
}
//toggle nav
function toggleHide()
{
    $("#text").toggle();

}});

私が正しい方向に進んでいるかどうか、またはコードにエラーが見られる人がいるかどうかを知りたいですか? メディア クエリを使用できない理由は、"#video-overlay-shadow and #video-overlay" = true であることを確認する必要があるためです。

したがって、これを試す前に私が言ったことに追加するだけです：

$(document).ready(function() {

var $window = $(window);

//display nav
var displayHide = true;

//on resize get widths
getWidths();
$window.resize(getWidths);

//set width of content to the needed widths
function getWidths()
{
    var browserWidth = $window.width();
    if(($("#video-overlay-shadow").length > 0) && ($(browserWidth >=740)))
                    {$("#hero-bg").css("display", "none");
                    }
                        else if(($("#video-overlay-shadow").length > 0) && ($(browserWidth <740)))
                        {
                        //do nothing
                        }

                        else if(($("#video-overlay-shadow").length > 0) && ($(browserWidth >=460)))//it exists
                        {
                            //do nothing
                        }
                        else if(($("#video-overlay-shadow").length <=0))
                        {
                        //do nothing
                        }
}});

しかし、まだアイデアが機能していませんか？video-overlay-shadow が存在し、画面サイズが 740 ～ 460 の場合にコードで記述されているとおり、#hero-bg で display:none が必要です。それ以外の場合は何もしません。現在、display:none; を設定しています。#hero-bg でいつも。

4

4 に答える 4

1

レスポンシブ Web デザインを使用して実行できないのはなぜですか? css ファイル内:

/* start css */

// some styles for all devices with max-width 460px

@media (min-width: 460px) and (max-width: 740px) {
  #video-overlay-shadow, #video-overlay {
    display: none;
  }
}

@media (min-width: 740px) {
  #video-overlay-shadow, #video-overlay {
    display: block;
  }
}

/* end css */
于 2013-01-16T17:20:19.713 に答える
1

の場合、JavaScript に尋ねることはできません#video-overlay==true。jQuery の要素の存在をテストするには、その長さを見つけます。

if ($('#video-overlay').length) {  // if no such div, length = zero = false

要素が表示されているかどうかをテストするには、そのセレクターを使用します。

if ($('#video-overlay:visible').length) {
于 2013-01-16T17:05:18.607 に答える
1

ここで何をしようとしているのかわかりませんが、要素が存在するかどうかを確認するために私がすることはここにあります

単に：

$('#video-overlay-shadow').val()

いいえ

(("#video-overlay-shadow, #video-overlay") == false)

純粋な JavaScript の代わりに jquery オブジェクトを使用しているため、$ に含める必要があります。

if((browserWidth < 740) && $("#video-overlay-shadow").val() && $("#video-overlay").val()){}

それがあなたが探しているものに近いことを願っていますが、詳細が役立つでしょう

于 2013-01-16T17:11:09.397 に答える
0

$2 つのオーバーレイ要素のがありません。現在、文字列をテストしているだけですが、これは必要なものではありません。オーバーレイが単なる入力であると仮定すると、次のことが必要になります。

$("#video-overlay-shadow").val() == true && $("#video-overlay").val() == true;

それらに他の真実の値を保存していない場合は、これを次のように単純化できます。

$("#video-overlay-shadow").val() && $("#video-overlay").val();

さらに、この値を毎回クエリするのではなく、変数に格納します。

于 2013-01-16T17:04:55.803 に答える