Pobieranie odpowiednich danych

pytanie zadane 15 lutego 2020 w JavaScript przez sqrt321 Nowicjusz (160 p.)

Nie wiem jak przekazać, żeby w zależności od selektora (klasy w html) pobierał odpowiednie dane. Teraz za każdym razem we wszystkie pola pobierają się dane z ostatniej nowej zmiennej. Ważne, żeby kod był pisany w Jquery.

 <div class="pet">
        <h2>Pupil</h2>
        <div class="kind">Gatunek: <strong></strong> </div>
        <div class="food">Pokarm: <strong></strong> </div>
    </div>
    <div class="animal">
        <h2>Zwierzę</h2>
        <div class="kind">Gatunek: <strong></strong> </div>
        <div class="food">Pokarm: <strong></strong> </div>
    </div>

class WildOrNot {
  constructor(kind, food) {
    this.kind = kind,
    this.food = food
  }
  Info() {
    $(".kind strong").text(this.kind)
    $(".food strong").text(this.food)}
}
console.log($(".kind").parent().attr("class"))
class Pet extends WildOrNot { 
  constructor(kind, food, selector) {
    super(kind, food, selector)
    this.selector = ".pet"
  }
}
const newPet = new Pet("Kot", "Kocia karma", "Pet") 
newPet.Info()
class Animal extends WildOrNot {
  constructor(kind, food, selector) {
    super(kind, food, selector)
    this.selector = ".Animal"
  }
}
const newAnimal = new Animal ("Lew", "Zebry", "Animal")
newAnimal.Info()

Dziękuję za każdą pomoc i wskazówki <3

1 odpowiedź

odpowiedź 15 lutego 2020 przez DawidK Nałogowiec (37,910 p.)

Problem jest w metodzie info()

Może ktoś mnie poprawi, ale nie widzę większego sensu dziedziczenia w tym przypadku - według mnie obie klasy mają to samo 4 atrybuty: rodzaj, pokarm, selector dla rodzaju i selector dla pokarmu oraz 1 metodę podmieniającą odpowiedni rodzaj i pokarm w selektorach.

Według mnie można to zrobić tak:

index.html (z js)

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Animal</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <div class="pet">
        <h2>Pupil</h2>
        <div class="kind-pet">Gatunek: <strong></strong> </div>
        <div class="food-pet">Pokarm: <strong></strong> </div>
    </div>
    <div class="animal">
        <h2>Zwierzę</h2>
        <div class="kind-animal">Gatunek: <strong></strong> </div>
        <div class="food-animal">Pokarm: <strong></strong> </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        class Animal {
            constructor(kind, food, selectorKind, selectorFood) {
                this.kind = kind,
                this.food = food,
                this.selectorKind = selectorKind,
                this.selectorFood = selectorFood
            }

            Info() {
                $(this.selectorKind).text(this.kind)
                $(this.selectorFood).text(this.food)
            }
        }

        const newPet = new Animal("Kot", "Kocia karma", ".kind-pet",".food-pet") 
        newPet.Info()

        const newAnimal = new Animal("Lew", "Zebry", ".kind-animal",".food-animal")
        newAnimal.Info()

    </script>
</body>
</html>