цель два HTML - PullRequest
Новая
       15

цель два HTML

0 голосов
/ 20 июня 2019

Я пытаюсь настроить таргетинг на два html-кода в одном javascript, и я понятия не имею, возможно ли это вообще

Я пытался присвоить идентификаторы и классы тегу html, но он не работает. У меня есть изображение, которое я хочу, чтобы оно было кликабельным, перенаправить пользователей на другой html и дал его и id и попытался нацелить его в js, но это все еще не работает. я пробовал тег href, но это не то, что я хочу. 

$(function(){
  $("#close1").on("click",closepage);
})

function closepage() {
  // console.log(checkUi);
  $("#space-3").css("display","block");
  $(".chat__main").css("opacity", "0");
  $("#chat-content").css("opacity","0");
}

Я хочу закрыть второй и третий HTML, которые .chat__main и #chat-content

Чтобы было понятнее, я хотел бы настроить таргетинг на разные идентификаторы из трех разных HTML. Все находится в одной папке, связано с тем же JavaScript

это третий HTML для примера. main.js - это js, с которой я работаю. Я хочу закрыть этот HTML-код, когда пользователи нажимают кнопку «Закрыть». 

<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no'>
<title>HybriD </title>
<link rel="stylesheet" href="css/main.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
</head>
  <body class="chat">

    <div class="chat__sidebar">
      <h3>People</h3>
      <div id="users"></div>
    </div>

<div class="chat__main">
      <div class="topChat">
          <img src="img/cross.png" id="close1">
        <h3 id="chatTitle">HybriD Chat</h3>
      </div>
      <ol id="messages" class="chat__messages"></ol>
      <div class="chat__footer">
        <form id="message-form">
          <input name="message" type="text" placeholder="Message" autocomplete="off"/>
          <button id="submit-btn"><img src="img/send.png" alt="Send" height="50" width="50"></button>
        </form>
      </div>
    </div>

    <script id="message-template" type="text/template">
      <li class="message">
        <div class="message__title">
          <h4>{{from}}</h4>
          <span>{{createdAt}}</span>
        </div>
        <div class="message__body">
          <p>{{text}}</p>
        </div>
      </li>
    </script>

    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="js/chat.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/libs/moment.js"></script>
    <script type="text/javascript" src="js/libs/mustache.js"></script>
  </body>
</html>

Это второй HTML. Это два HTML-кода, которые я хочу настроить для закрытия. Я нацеливаюсь на неправильные идентификаторы? 

<html>
  <head>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no'>
    <title>HybriD </title>
    <meta name="description" content="Basic Example — Networked-Aframe">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <link rel="stylesheet" type="text/css" href="css/vendor/common.css">
    <link rel="stylesheet" type="text/css" href="css/vendor/load.css">
    <link rel="stylesheet" href="css/vendor/hamburgers.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
    <link rel="manifest" href="favicons/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <script src="js/vendor/aframe-master.js"></script>
    <script src="js/vendor/aframe-mouse-cursor-component.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="js/vendor/jquery-1.11.2.min.js"></script>
    <script src="js/vendor/socket_io.js"></script>
    <script src="easyrtc/easyrtc.js"></script>
    <script src="js/vendor/network-aframe.js"></script>
    <script src="js/vendor/aframe-particle.js"></script>
    <script src="js/vendor/TweenMax.min.js"></script>
</head>
<body class="centered-form" id="loginpage">
        <div id="chat-wrapper">
            <div id="chat-content">
               <svg id="home-logo2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 344.74 321.88"><defs><style>.cls-1{fill:#ececec;}.cls-2{fill:#07f;}.cls-3{fill:#ffce2e;}</style></defs><title>Asset 2</title></svg>

<!--        <input type="image" id="close1" src="img/cross.png">-->
        <img src="img/cross.png" id="close1">
        <div id="login" class="centered-form__form">
            <form action="/chat.html">
            <div class="form-field"><h3>Join Chat</h3></div>
                <div class="form-field">
                    <input type="text" name="name" placeholder="Display Name">
                </div>
                <div class="form-field">

                <input type="text" name="room" placeholder="Room Name">
                </div>
                <div class="form-field">
                <button>Join</button>
                </div>
            </form>
        </div>
             </div>
            </div>
<script src="js/vendor/AVideoPlayer.js"></script>
<script src="js/vendor/jquery.Wload.js"></script>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/main.js"></script>
<script src="js/chat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>    
</body>

для основного HTML, это очень сложно. Первая страница, которую увидят пользователи, будет страницей входа. После того, как они войдут в систему, они будут перенаправлены на изображение с именем "# space-3", которое я хочу направить туда пользователям. это основной HTML для моего сайта: 

<html>
  <head>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no'>
    <title>HybriD </title>
    <meta name="description" content="Basic Example — Networked-Aframe">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <link rel="stylesheet" type="text/css" href="css/vendor/common.css">
    <link rel="stylesheet" type="text/css" href="css/vendor/load.css">
    <link rel="stylesheet" href="css/vendor/hamburgers.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
    <link rel="manifest" href="favicons/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <script src="js/vendor/aframe-master.js"></script>
    <script src="js/vendor/aframe-mouse-cursor-component.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="js/vendor/jquery-1.11.2.min.js"></script>
    <script src="js/vendor/socket_io.js"></script>
    <script src="easyrtc/easyrtc.js"></script>
    <script src="js/vendor/network-aframe.js"></script>
    <script src="js/vendor/aframe-particle.js"></script>
    <script src="js/vendor/TweenMax.min.js"></script>
    <script>
  $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
</script>
  </head>
  <body>
    <div id="error">
      <img id="disconnect-icon" src="img/disconnect.svg" alt="">
      <p class="error-msg">
        Disconnected from the server.
      </p>
      <p class="error-msg">
        Please refresh the page.
      </p>
    </div>
    <div id="home-wrapper">
      <div id="home-content">
        <svg id="home-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 344.74 321.88"><defs><style>.cls-1{fill:#ececec;}.cls-2{fill:#07f;}.cls-3{fill:#ffce2e;}</style></defs><title>Asset 2</title></svg>
        <div id="home-step-one">
          <div id="visitor-button" class="home-buttons">Visitor</div>
          <div id="admin-button" class="home-buttons">Admin</div>
        </div>
        <div id="home-step-two">
          <form id="admin-form">
            <input type="password" id="pin" placeholder="Password">
            <input type="text" id="room-name" placeholder="Room Name">
            <div id="enter-button">Enter Lobby</div>
            <div id="create-button">Create</div>
            <div id="join-button">Join</div>
            <div id="create-private">
              <img id="create-private-icon" src="img/create.svg" alt="">
              <span>Create Private</span>
            </div>
            <div id="join-private">Join Private</div>
          </form>
          <input type="image" src="img/back.svg" id="back">
        </div>
        <p id="copyright">©2019 Suntec Singapore. All Rights Reserved. </p>
        </div>
        </div>
    <button class="hamburger hamburger--arrow" type="button">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
    </button>
    <div id="levels-wrapper">
      <ul id="levels-inner">
        <li id="level3">Level 3</li>
        <li id="level4">Level 4</li>
        <li id="level6">Level 6</li>
        <img src="img/logo-white.svg" alt="" id="nav-logo">
      </ul>
    </div>

    <a id="chat" href="login.html"><input type="image" id="chat" src="img/chat.svg"></a>
    <input type="image" id="nav" src="img/navigate.svg">
<!--    <input type="image" id="chat" src="img/chat.svg">-->
    <input type="image" id="to-banq" src="img/banquet.svg">
    <span id="banq-text" class="nav-text">Banquet</span>
    <input type="image" id="to-buffet" src="img/buffet.svg">
    <span id="buffet-text" class="nav-text">Buffet</span>
    <input type="image" id="to-ex" src="img/exhibition.svg">
    <span id="ex-text" class="nav-text">Exhibition</span>
    <input type="image" id="to-conf" src="img/conference.svg">
    <span id="conf-text" class="nav-text">Conference</span>
    <input type="image" id="to-concert" src="img/concert.svg">
    <span id="concert-text" class="nav-text">Concert</span>
    <input type="image" id="to-event" src="img/event.svg">
    <span id="event-text" class="nav-text">Event</span>
    <input type="image" id="to-space" src="img/space.svg">
    <span id="space-text" class="nav-text">Space Only</span>
    <input type="image" id="to-classroom" src="img/classroom.svg">
    <span id="classroom-text" class="nav-text">Classroom</span>
    <input type="image" id="video-control" src="img/video.svg">
    <input type="image" id="play-vid" src="img/play.svg">
    <input type="image" id="mute-vid" src="img/mute.svg">
    <input type="image" id="replay-vid" src="img/reset.svg">
    <a-scene networked-scene="room: lobby; debug: true;">
      <a-assets>
        <img id="buffet-3" crossorigin="anonymous" src="img/level3buffet.JPG">
        <img id="space-3" crossorigin="anonymous" src="img/level3space.jpg">
        <img id="classroom-3" crossorigin="anonymous" src="img/level3classroom.jpg">
        <img id="cluster" crossorigin="anonymous" src="img/Hall 406CX Cluster2.jpg">
        <img id="banquet" crossorigin="anonymous" src="img/Hall 405BXE 406CXD banquet.jpg">
        <img id="exhibition" crossorigin="anonymous" src="img/hall 40123 exhibtion.jpg">
        <img id="concert-2" crossorigin="anonymous" src="img/level6concert.jpg">
        <img id="banquet-2" crossorigin="anonymous" src="img/level6banq.JPG">
        <img id="event" crossorigin="anonymous" src="img/level6event.jpg">
        <img src="img/landmark.png" id="platform" crossorigin="anonymous">
        <!-- This is where you can change the client's logo -->
        <img src="img/SuntecLvl4Logo.png" id="logo2" crossorigin="anonymous">
        <img src="img/SuntecLvl4Logo.png" id="logo3" crossorigin="anonymous">
        <!-- Videos on the projector screens -->
      <video id="video-src" src="img/3x4border.mp4" playsinline webkit-playsinline></video>
      <video src="img/2x3.mp4" id="video-src2" playsinline webkit-playsinline></video>
  </a-assets>
<a-node></a-node>
<a-video class="clientVideos" id="video-screen" src="#video-src" rotation="0 -90 0" position="100 15.935 17" width="40" height="30"></a-video>
<a-video class="clientVideos" id="video-screen2" src="#video-src2" rotation="0 -90 0" position="100 1.935 6.500" width="60" height="15"></a-video>
<a-sky id="sky" src="#space-3" rotation="0 180 0"></a-sky>
<a-circle id="logo" src="#platform" radius="1" rotation="-90 0 0" position="9.54196 -171.79611 -1.47969" material="" geometry="radius: 27.1"></a-circle>
<a-plane class="clientPictures" id="ex-logo" src="#logo2" position="-20.5 5.9757 -0.41456" rotation="0 90 0" material="side: double; color: #FFFFFF; transparent: true; opacity: 1.5" height="4" width="9" geometry="" visible=""></a-plane>
<a-plane class="clientPictures" id="classroom-logo" src="#logo3" position="59.7606 4.21649 6.21335" rotation="0 -75.05747116213784 0" material="side: double; color: #FFFFFF; transparent: true; opacity: 1.5" height="4" width="9" geometry="" visible="" scale="2.7 2.7 2.7"></a-plane>
<a-entity light="distance:1;type:ambient" id="lightit"></a-entity>
</a-scene>
<script src="js/vendor/AVideoPlayer.js"></script>
<script src="js/vendor/jquery.Wload.js"></script>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/main.js"></script>
<script src="js/chat.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>

Пожалуйста, игнорируйте home-logo, так как это просто логотип с анимацией

1 Ответ

0 голосов
/ 20 июня 2019

Вы можете связать один файл JavaScript в другом HTML-файле и нацеливать его, пока он является действительным селектором.

Если вы хотите нацелить несколько селекторов, вы можете сделать что-то вроде этого.

$('.chat__main , #chat-content').css("opacity", "0");

И, конечно же, не забудьте включить 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...