Код JavaScript CodePen не работает в локальном

Прежде всего, я новичок в javascript, я хотел бы повторно использовать код в этом коде

    $('a[href*=#]').click(function(){
  return false;
});


var animationEndEvent = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";

var Person = {
  wrap: $('#people'),
  people: [
    {
      name: 'Linda',
      age: 25,
      img: "https://i.imgur.com/QZuGC10.jpg"
    },
    {
      name: 'Lisa',
      age: 20,
      img: "https://i.imgur.com/1EWwp59.jpg"
    },
    {
      name: 'Sandra',
      age: 18,
      img: "https://i.imgur.com/Lu3laIj.jpg"
    },
    {
      name: 'Chloe',
      age: 18,
      img: "https://i.imgur.com/WgYIxhw.png"
    },
    {
      name: 'Alexa',
      age: 23,
      img: "https://i.imgur.com/D0PQegY.png"
    },
    {
      name: 'Maria',
      age: 21,
      img: "https://i.imgur.com/eqd5IhH.jpg"
    },
    {
      name: 'Emma',
      age: 24,
      img: "https://i.imgur.com/4F9NXPo.png"
    },
    {
      name: 'Sara',
      age: 18,
      img: "http://i40.tinypic.com/ofxe21.jpg"
    },
    {
      name: 'Lara',
      age: 22,
      img: "https://i.imgur.com/HMkdN6A.jpg"
    }
  ],   
  add: function(){
    var random =     this.people[Math.floor(Math.random() * this.people.length)];
    this.wrap.append("<div class='person'><img alt='" + random.name + "' src='" + random.img + "' /><span><strong>" + random.name + "</strong>, " + random.age + "</span></div>");
  }
}

var App = {
  yesButton: $('.button.yes .trigger'),
  noButton: $('.button.no .trigger'),
  blocked: false,
  like: function(liked){
    var animate = liked ? 'animateYes' : 'animateNo';
    var self = this;
    Person.add();
    if (!this.blocked) {
      this.blocked = true;           
      $('.person').eq(0).addClass(animate).one(animationEndEvent, function() {
        $(this).remove();
        self.blocked = false;
      });
    }
  }
};

var Phone = {
  wrap: $('#phone'),
  clock: $('.clock'),
  updateClock: function() {
    var date = new Date();
    var hours = date.getHours();
    var min = date.getMinutes();
    hours = (hours < 10 ? "0" : "") + hours;
    min = (min < 10 ? "0" : "") + min;
    var str = hours + ":" + min;
    this.clock.text(str);
  }
}

App.yesButton.on('mousedown', function() {
  App.like(true);
});

App.noButton.on('mousedown', function() {
  App.like(false);
});

$(document).ready(function() {
  Person.people.forEach(function(person){
    new Image().src = person.img; 
  });
  Phone.updateClock();
  setInterval('Phone.updateClock()', 1000);

  Person.add();
  Person.add();
  Person.add();
  Person.add();
});

(https://codepen.io/renatorib/pen/extCA). Но я не могу заставить его работать на местном уровне. Я вставил jquery (ту же версию, которую он использует //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js) и преобразовал sass в css.

Он выглядит так же, но его часть с javascript не работает (нет фотографий, нет кнопок, ничего ..) Никаких ошибок консоли ... Я не знаю, что еще делать ..

PD: Извините за мой английский, надеюсь, я объяснил


person JohnSpa    schedule 05.08.2019    source источник
comment
Вам не хватает https: в ссылке jquery. Вам также не хватает таких ссылок, как bootstrap и fontawesome. Проверьте исходное перо, щелкните настройки css и возьмите эти ссылки, сделайте то же самое для html и javascript, если они есть.   -  person Souleste    schedule 05.08.2019


Ответы (2)


Замените это и используйте эту версию jQuery внизу.

 $('a[href*="#!..."]').click(function(){
  return false;
});

Полное репо

person Yasin    schedule 05.08.2019
comment
Спасибо, не могли бы вы дать мне краткое объяснение, если оно есть? - person JohnSpa; 06.08.2019
comment
a[href*="#!..."], поскольку # - специальный символ, его необходимо экранировать. Итак, "#" здесь. Кстати, вы можете заменить это только на a[href*="#"]. - person Yasin; 06.08.2019

Если вы выполните следующие действия, все должно сработать.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>your title</title>
    <!-- step 1 add css file-->
    <link href="your-style.css" rel="stylesheet" type="text/css">
    <!-- step 2 add jquery library-->
    <script src="jquery.js"></script>
    <!--step 3 add script that run after dom ready-->
    <script>
    $(function() {
    // dom is ready 
    // your script goes here    
    });
    </script>


</head>
<body>
    <!-- step 4 html structur goes hear. Note that the selectors that you select in script  must be the same in html-->
</body>
</html> 
person Hamid Pouladi    schedule 05.08.2019