Несколько сценариев jquery на одной странице

Question

Я новичок в Jquery и столкнулся с чем-то, что в случае ответа очень поможет в будущем. У меня 2 очень простых вопроса Я использую codeigniter, HTML5 и все php-страницы.

У меня есть меню «в стороне» с 4-5 разделами, которые я хочу закрыть, чтобы сэкономить место. Поэтому я использую 2 простых скрипта slideToggle.

$("a").click(function () {
   $('#cat').slideToggle('slow', function() {
    })
});    

и

$("button").click(function () {
  $('#dog').slideToggle('slow', function() {
    })
});     

Проблема в том, что, если я использую кнопку на обоих, оба сценария работают, даже если я запрашиваю сценарий для запуска на 2 разных идентификаторах (я знаю, что собака и кошка глупы, я просто бросил их, чтобы увидеть, если поддельный идентификатор будет работать, и это сработало)

Вопрос в том, как я могу использовать кнопку ИЛИ href в обоих сценариях для сохранения моего стиля?

Мой второй вопрос: можете ли вы добавить несколько скриптов в файл .js для включения и как бы вы это сделали? Каждый из них получает теги сценария или какой-либо другой вид разделителя?

Спасибо за помощь, это мои первые два сценария. По крайней мере, они работают:)

    <div class="menu">
<h2>News Links</h2>

 <a href="#">Display</a>
 <!--
if I use "button" here, both scripts run on tandem
-->
<script>
 $("a").click(function () {
  $('#cat').slideToggle('slow', function() {
    })
});     

бенчмарк> знак ( 'links_start'); $ this-> db-> order_by ('id', 'DESC'); $ This-> db-> предел ('10' ); $ query = $ this-> db-> get ('links'); foreach ($ query-> result () как $ row)
{ echo "link \" title = \ "$ row-> title \" target = \ "_ blank \"> $ row-> name"; } $ This-> бенчмарк> знак ( 'links_end');

    ?>
   </ul>
   </div>
   </div>
   <div class="menu">
   <h2>Archives</h2>
   <button>Display</button> <!--if I use "a" here, both scripts run on tandem
     -->
    <script>
  $("button").click(function () {
  $('#dog').slideToggle('slow', function() {
    })
  });     
  </script>
  <div id="dog">
  <?php
$this->db->order_by('id', 'DESC');
$where = "publish";
$this->db->where('status', $where);
$this->db->select('id, title', FALSE);
$this->db->select('DATE_FORMAT(date, "%b %D %Y")AS date');
$this->db->from('posts');
$query = $this->db->get();
foreach ($query->result() as $row)          

Answer 1

Я думаю, что вы хотите что-то вроде этого:

<button id="news_display">Display News</button>

<button id="archive_display">Display Archive</button>

$("#news_display").click(function () {
   $('#news').slideToggle('slow');
});    

$("#archive_display").click(function () {
  $('#archive').slideToggle('slow');
});   

При этом используются события jQuery id для событий щелчка, как вы уже делали в анонимных функциях. Таким образом, они конкретны и независимы.

Answer 2

Вы можете использовать комбинированные селекторы:

$("a, button").click(function () {
    $('#cat').slideToggle('slow');
}); 

Это позволит вам запускать ту же функцию при нажатии a или button.

Мой второй вопрос: можете ли вы добавить несколько скриптов в файл .js для включения и как бы вы это сделали? Каждый из них получает теги сценария или какой-либо другой вид разделителя?

JavaScript-сценарий, как правило, относится к файлу, включенному тегом script, хотя это использование неоднозначно.

То, что вы получили в своем посте, - это утверждение javascript, возможно внутри тега script на вашей странице:

<script type="text/javascript">
    function helloWorld() {
        alert('Hello world');
    }
</script>

Вы можете сделать это (встроенный в страницу) или переместить содержащийся код в файл .js и сослаться на него:

<script type="text/javascript" src="myjavascript.js"></script>

Ваш myjavascript.js файл будет выглядеть так:

function helloWorld() {
    alert('Hello world');
}

myjavascript.js может содержать столько JavaScript, сколько вы хотите. Обычные подходы заключаются в размещении сгруппированных функций в одном файле javascript и их включении на страницу. Это облегчает повторное использование JavaScript, который вы написали на нескольких страницах, включая его с тегом script на каждой странице, которая его использует (я предполагаю, что вы уже сделали это с библиотекой jquery javascript).

Вы можете сделать то же самое, что сделал jquery, и сбросить весь свой javascript в файл .js и использовать script для загрузки его на свою страницу.

Answer 3

В связи с вашим вторым вопросом: код, который вы отправили

$("a").click(function () {
    $('#cat').slideToggle('slow', function() {
    })
});

… - это одно утверждение.Вы можете написать столько утверждений, сколько захотите, в одном файле JavaScript или теге <script>.Если у вас есть несколько файлов JavaScript, вы можете объединить их в один файл и ссылаться на этот файл из тега скрипта.