How to add two classes to two objects in one click?

Question

Vue.js

There is a script:

$(document).ready(function(){
  $('.logo_block').click(function () {
    $(".line-relative").addClass('line-topp');
    });
  });

Affects one block line-relative
How would you add a script to add a class and on another element at the same time with one click?

Be kind, ready varik) I don't understand anything in scripts

Thank you for your attention!

Answer 1

Let's add two properties - the number of elements on the page (i.e., how many elements should be shown at a time) and the number of the current page:

perPage: 10, // или 20, или 50, это вам виднее... да и настраиваемым можно его сделать
page: 1,

Then we add a couple of calculated properties - the number of pages and the elements of the current page:

pages() {
  return Math.ceil(this.items.length / this.perPage);
},
pageData() {
  const end = this.page * this.perPage;
  return this.items.slice(end - this.perPage, end);
},

And display the elements:

<div v-for="item in pageData">
  ...

We will also make methods for switching pages - by number and relative to the current page...

goTo(page) {
  this.page = Math.max(1, Math.min(this.pages, page));
},
next(change) {
  this.goTo(this.page + change);
},

...to let the user see all the data:

<button @click="goTo(1)">в начало</button>
<button @click="next(-1)">предыдущая страница</button>
<button @click="next(+1)">следующая страница</button>
<button @click="goTo(pages)">в конец</button>

https://jsfiddle.net/dkb5wej1/

Answer 2

Do you want to read the documentation about taking elements by index, or can you guess?

Answer 3

https://en.vuejs.org/v2/guide/list.html#Display...

Answer 4

$(document).ready(function(){
  $('.logo_block').click(function () {
    $(".line-relative").addClass('line-topp');
    $(".line-relative2").addClass('line-topp');
    });
  });