Como fazer um grupo de cards com botão Ler mais?

T

t.i estressada

Olá!

Estou usando Html, Css e Javascript para criar um grupo de três cards iguais, cada um com um botão ler mais/ ler menos. Cada card é um Plano com pacotes de benefícios e eu quero que esses benefícios expandam e encolham ao clicar no botão.

O problema é que esse botão só funciona no Card 1. Ao clicar no mesmo botão no Card 2 e Card 3, nada acontece.

Tentei copiar o código JavaScript três vezes, dar diferentes ids para cada Card no Html e então copiar esses ids para o getElementById no JS, mas não obtive nenhum resultado diferente (meu conhecimento em JS é quase zero).

Me ajudem a ver onde estou errando, por favor? Coloquei o codigo no executavel. E muito obrigada.


Code: 
var button = document.getElementById('lermais');
  
button.addEventListener('click', function(){
  var plano = document.querySelector('.plano');
  plano.classList.toggle('active');

  if (plano.classList.contains('active')) {
    return button.textContent = 'Ver menos';
  }

  button.textContent = 'Ver todos os benefícios';
});

Code: 
body {
      diplay: flex;
      background-color: #333;
      color: #fff;
    }

    .sectionplanos{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;
      transition: .5s !important;
      font: inherit;
      font-family: Montserrat;

    }

    .sectionplanos .plano{
      position: relative;
      display: block;
      color: #fff;
      width: 220px;
      background-color: #1e1e1e;
      border-top: 4px solid #fff;
      border-radius: 0 15px 10px 10px;
      margin-left: 30px;
      margin-bottom: 50px;
    }


    .conteudoplanos{
      position: relative;
      overflow: hidden;
      height: 250px;
      color: #fff;
      padding: 20px;
      text-align: left;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 12px;
    }


    .conteudoplanos::before{
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 260px;
      height: 100px;
      background: linear-gradient(transparent, #1e1e1e);
    }

    #lermais{
      border: none;
      color: #FFF;
      background-color: transparent;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s;
    }

    #lermais:hover{
      font-size: 17px;
      transition: 0.3s;
    }

    .plano.active .conteudoplanos{
      height: auto;
    }

    .plano.active .conteudoplanos::before{
      visibility: hidden;
    }



    .headplanos {
      color: #FFF;
      text-align: center;
      height: 124px;
    }

    .nomeplanos {
      font-family: Montserrat;
      font-size: 30px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      margin-top: 15px;
    }

    .precoplanos {
      font-family: Montserrat;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      margin: 0px !important;
    }

    .tipoplanos {
      text-align: center;
      font-family: Montserrat;
      font-size: 13px;
      font-style: normal;
      font-weight: 300;
      line-height: normal;
      margin: 0px !important;
    }

    .beneficiosplanos {
      font-family: Montserrat;
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      line-height: 25px;
      padding: 10px;
    }

    .rodapeplanos {
      padding: 10px;
      height: 50px;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

Code: 
    <div class="sectionplanos">
       <div class="plano">                
          <div class="headplanos">
            <h3 class="nomeplanos">Plano 1</h3>
            <p class="precoplanos">preço</p>
            <p class="tipoplanos">tipo</p>
          </div>
          <div class="conteudoplanos">
            <p>Beneficio.</p>
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>       
          </div>
          <div class="rodapeplanos">                      
            <button type="button" id="lermais">Ver todos os beneficios</button>
          </div>                                   
        </div>
        <div class="plano">                
          <div class="headplanos">
            <h3 class="nomeplanos">Plano 2</h3>
            <p class="precoplanos">preço</p>
            <p class="tipoplanos">tipo</p>
          </div>
          <div class="conteudoplanos">
            <p>Beneficio.</p>
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>       
          </div>
          <div class="rodapeplanos">                      
            <button type="button" id="lermais">Ver todos os beneficios</button>
          </div>                                   
        </div>
        <div class="plano">                
          <div class="headplanos">
            <h3 class="nomeplanos">Plano 2</h3>
            <p class="precoplanos">preço</p>
            <p class="tipoplanos">tipo</p>
          </div>
          <div class="conteudoplanos">
            <p>Beneficio.</p>
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>       
          </div>
          <div class="rodapeplanos">                      
            <button type="button" id="lermais">Ver todos os beneficios</button>
          </div>                                   
        </div>
    </div>
 

Unreplied Threads

как создать 25 кнопок не прописывая их в xaml в ручную и не нарушив подход mvvm c# wpf

  • VladislavTango
  • Technology
  • Replies: 0
сейчас кнопки создаются так но мне за это хотят сломать ноги

Code: 
public ObservableCollection<Button> Buttons { get; private set; }   

 ObservableCollection<Button> CreateButtons(ObservableCollection<Button> but)
        {
            but = new ObservableCollection<Button>();
            for (int i = 0 ; i < 25; i++)
            {
                btn[i] = new Button();
                btn[i].CommandParameter = i;
                btn[i].Background = Brushes.Blue;
                btn[i].Command = ColorChange;
                btn[i].BorderBrush= new SolidColorBrush(Colors.Black);
                but.Add(btn[i]);
            }
            return but;
        }
  public SlotMineViewModel()//конструктор
        {
            Buttons = CreateButtons(Buttons);
        }

xaml

Code: 
<ItemsControl Grid.Column="0" Grid.ColumnSpan="5" ItemsSource="{Binding Buttons}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <UniformGrid Rows="5" Columns="5" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                               <Button Content="{Binding Text}" Command="{BindingCommand}"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>

How does having more antenna help in a networking router

  • Jake
  • Physics
  • Replies: 0
When I look at networking routers on the market, those that provide external antenna connections offer at least 2 connections.

What is the reason for having 2 antenna? Most if not all, have their antenna virtually at the same locality since they are attached to the device itself, hence it does not seem to provide "greater coverage". Or, does it boost the total gain e.g. 2 x 18 dBi anntena gives 36 dBi, if so, why not just have a single 36 dBi antenna?

Long Story: I recently had to buy antenna to try boost the signal strength going into my 4G LTE router. The router has 2 SMA female connectors on the back. I bought a single antenna and connected to one of the connectors and tested the setup. There was no increase in signal strength and speed a according to the tests. I am thinking of buying another antenna to connect to the router, but not sure if it will help at all.

Unlocking Potential with High-Quality Solar Aged Leads

Benefits of Buying Solar Aged Leads:

Targeted Audience: Solar aged leads are individuals who have shown a prior interest in solar energy. By purchasing these leads, you're engaging with a more targeted audience, increasing the likelihood of conversion.

Cost-Effective: Aged leads are often more cost-effective than generating entirely new leads. This allows you to allocate your budget more efficiently and achieve a better return on investment.

Immediate Action: Aged leads may be closer to making a decision compared to fresh leads. They've had some time to consider solar options, and your outreach might be the push they need to move forward.

Database Expansion: Acquiring solar aged leads helps in expanding your customer database. This is particularly beneficial for businesses looking to scale and establish a more significant presence in the solar energy market.

Huawei confirms MatePad Pro 13.2 for December 12 event

  • GSMArena.com - Latest articles
  • Android
  • Replies: 0

Huawei confirms MatePad Pro 13.2 for December 12 event​

gsmarena_002.jpg


Sagar 07 December 2023


A few days ago, Huawei announced it's hosting an event in Dubai on December 12 for an "Innovate Product Launch" without mentioning what products it's launching. The teaser it shared suggested one of the products would be a tablet, and today, we learned that tablet is the MatePad Pro 13.2, currently exclusive to China.

Huawei posted a video on X confirming the December 12 global launch of the MatePad Pro 13.2. The post doesn't explicitly mention the tablet but includes #HUAWEIMatePadPro, while the video shows a tablet with a notch and the same wallpaper we've seen in the MatePad Pro 13.2's official images.

The Huawei MatePad Pro 13.2 is powered by the Kirin 9000S SoC, runs HarmonyOS 4, and has up to 16GB RAM and 1TB storage onboard. It's built around a 13.2" 144Hz OLED display of 2,880x1,920-pixel resolution and packs a 10,100 mAh battery with 88W wired charging.

gsmarena_002.jpg

The MatePad Pro 13.2 also features six speakers and three cameras - 13MP primary, 8MP ultrawide, and 16MP selfie (joined by a ToF 3D sensor). You can read our Huawei MatePad Pro 13.2's announcement coverage here to learn more about it.

Related articles
Total reader comments: 0

ADVERTISEMENT

Как для текста внутри textbox сделать underline шрифт. Avalonia MVVM

Возникла проблема с добавлением возможности сделать текст внутри TextBox подчеркнутым. В Textblock есть атрибут TextDecorations и он позволяет подчеркивать текст, но для textbox я не могу найти подходящего атрибута

Какие методы класса String нужно специфицировать как noexcept?

Решаю курс на степике, там вот такой тест.Перепробовал уже все варианты, никак не могу понять в чем ошибка.

Выберите все подходящие ответы из списка:

Конструктор по-умолчанию.

Конструктор копирования.

Перемещающий конструктор.

Оператор присваивания.

Перемещающий оператор присваивания.

Деструктор.

Метод size().

Метод clear().

Эквалайзер на Python

Всем привет. По учёбе задание сделать mp3 плеер. Получил задание от преподавателя реализовать эквалайзер (на высокие, средние и низкие частоты). В интернете совсем никакой информации не могу найти, кроме как графической визуализации, а мне нужна именно настройка воспроизведения. Может кто подсказать как в принципе или хотя бы с помощью какой библиотеки можно его реализовать. Заранее спасибо. Вот мой код:

Code: 
from PyQt5 import QtCore, QtGui, QtWidgets, QtMultimedia
from PyQt5.QtGui import QPixmap
from PIL import Image
from io import BytesIO
import mutagen
import eyed3
import os
import random
from interface import Ui_MediaPlayer
from equaliser import EqualizerDialog


class Player(QtWidgets.QMainWindow, Ui_MediaPlayer):
    def __init__(self):
        super(Player, self).__init__()
        self.setupUi(self)
        self.setAcceptDrops(True)
        self.songsList.setDragEnabled(True)
        self.setWindowTitle("NeonPlayer")

        self.buttonPlay.clicked.connect(self.play)
        self.songsList.itemDoubleClicked.connect(self.play)
        self.buttonLoad.clicked.connect(self.load)
        self.buttonDelete.clicked.connect(self.delete)
        self.buttonNext.clicked.connect(self.next_track)
        self.buttonPrev.clicked.connect(self.prev_track)
        self.songsList.itemClicked.connect(self.song_changed)
        self.songsList.itemDoubleClicked.connect(self.play_by_double_click)
        self.buttonRandom.clicked.connect(self.shuffle_songs)
        self.buttonRepeat.clicked.connect(self.change_repeat_status)
        self.buttonEqualiser.clicked.connect(self.open_dialog)

        self.dir = ""
        self.playStatus = 0
        self.repeatStatus = 0
        self.current_position = 0
        self.mediaPlayer = QtMultimedia.QMediaPlayer()

        self.volumeSlider.valueChanged[int].connect(self.change_volume)
        self.volumeSlider.setValue(50)
        self.volume = self.volumeSlider.value()
        self.mediaPlayer.setVolume(self.volume)

        self.positionSlider.sliderMoved.connect(self.set_position)
        self.positionSlider.sliderPressed.connect(self.slider_pressed)
        self.positionSlider.sliderReleased.connect(self.slider_released)
        self.positionSlider.sliderReleased.connect(self.update_current_position)
        self.mediaPlayer.positionChanged.connect(self.update_current_position)
        self.mediaPlayer.durationChanged.connect(self.update_duration)
        self.mediaPlayer.mediaStatusChanged.connect(self.media_status_changed)

        self.positionSliderTimer = QtCore.QTimer(self)
        self.positionSliderTimer.timeout.connect(self.update_current_position)
        self.positionSliderTimer.start(100)

        self.low_boost = 1.0
        self.mid_boost = 1.0
        self.high_boost = 1.0

    def open_dialog(self):
        try:
            dialog = EqualizerDialog(self)
            dialog.verticalSlider_low.valueChanged.connect(self.set_low_boost)
            dialog.verticalSlider_mid.valueChanged.connect(self.set_mid_boost)
            dialog.verticalSlider_high.valueChanged.connect(self.set_high_boost)
            dialog.exec_()
        except Exception as e:
            print(f"ошибка в диалоге: {e}")

    def set_low_boost(self, value):
        self.low_boost = value

    def set_mid_boost(self, value):
        self.mid_boost = value

    def set_high_boost(self, value):
        self.high_boost = value

    def dragEnterEvent(self, event):
        if event.mimeData().hasUrls():
            event.acceptProposedAction()

    def dropEvent(self, event):
        for url in event.mimeData().urls():
            file_path = url.toLocalFile()
            if file_path.endswith(".mp3") and os.path.isfile(file_path):
                self.songsList.addItem(QtWidgets.QListWidgetItem(file_path))

    def song_changed(self):
        self.mediaPlayer.stop()
        if self.playStatus == 1:
            self.playStatus = 0
        else:
            self.playStatus = 1
            item = self.songsList.currentItem()
            file_name = os.path.join(self.dir, item.text())
            self.set_info(file_name)
        self.play()

    def play_by_double_click(self):
        self.mediaPlayer.stop()
        self.playStatus = 0
        self.play()

    def shuffle_songs(self):
        current_items = [self.songsList.item(i).text() for i in range(self.songsList.count())]
        random.shuffle(current_items)
        self.songsList.clear()
        self.songsList.addItems(current_items)

    def play(self):
        try:
            if self.playStatus == 0:
                if self.current_position == 0:
                    item = self.songsList.currentItem()
                    if item:
                        file_name = os.path.join(self.dir, item.text())
                        content = QtMultimedia.QMediaContent(QtCore.QUrl.fromLocalFile(file_name))
                        self.mediaPlayer.setMedia(content)
                        self.mediaPlayer.play()
                        self.playStatus = 1
                    else:
                        self.songsList.setCurrentRow(0)
                        self.play()
                    self.set_info(file_name)
                else:
                    self.mediaPlayer.setPosition(self.current_position)
                    self.mediaPlayer.play()
                    self.playStatus = 1
                self.set_button_play_style()
            else:
                self.current_position = self.mediaPlayer.position()
                self.mediaPlayer.stop()
                self.playStatus = 0
                self.set_button_play_style()

        except Exception as e:
            print(f"ошибка в play: {e}")

    def next_track(self):
        current_row = self.songsList.currentRow()
        if current_row + 1 == self.songsList.count():
            current_row = -1
        self.songsList.setCurrentRow(current_row + 1)
        item = self.songsList.currentItem()

        if item:
            file_name = os.path.join(self.dir, item.text())
            content = QtMultimedia.QMediaContent(QtCore.QUrl.fromLocalFile(file_name))
            self.mediaPlayer.setMedia(content)
            self.current_position = 0
            if self.playStatus == 1:
                self.mediaPlayer.play()
            self.set_info(file_name)
        else:
            self.songsList.setCurrentRow(0)
            if self.playStatus == 1:
                self.play()

    def prev_track(self):
        current_row = self.songsList.currentRow()
        if current_row == 0:
            current_row = self.songsList.count()
        self.songsList.setCurrentRow(current_row - 1)
        item = self.songsList.currentItem()
        if item:
            file_name = os.path.join(self.dir, item.text())
            content = QtMultimedia.QMediaContent(QtCore.QUrl.fromLocalFile(file_name))

            self.mediaPlayer.setMedia(content)
            self.current_position = 0
            if self.playStatus == 1:
                self.mediaPlayer.play()
            self.set_info(file_name)
        else:
            self.songsList.setCurrentRow(0)
            if self.playStatus == 1:
                self.play()

    def load(self):
        file_dialog = QtWidgets.QFileDialog()
        file_dialog.setNameFilter("MP3 files (*.mp3)")
        file_dialog.setFileMode(QtWidgets.QFileDialog.ExistingFile)
        file_dialog.setViewMode(QtWidgets.QFileDialog.List)

        if file_dialog.exec_():
            selected_files = file_dialog.selectedFiles()
            if selected_files:
                selected_file = selected_files[0]
                self.songsList.addItem(selected_file)
                self.dir = os.path.dirname(selected_file)

    def delete(self):
        item = self.songsList.currentItem()

        if item:
            row = self.songsList.row(item)
            self.songsList.takeItem(row)
            del item
            if self.playStatus == 1:
                current_row = self.songsList.currentRow()
                self.songsList.setCurrentRow(current_row - 1)
                self.next_track()

    def change_volume(self, value):
        self.mediaPlayer.setVolume(value)

    def update_duration(self, duration):
        self.positionSlider.setMaximum(duration)

        remaining_time = QtCore.QTime(0, 0)
        remaining_time = remaining_time.addMSecs(duration - self.mediaPlayer.position())
        self.timeCurrent.setText(remaining_time.toString("mm:ss"))

    #Слайдер позиции в треке
    def set_position(self, pos):
        self.mediaPlayer.setPosition(pos)

    def slider_pressed(self):
        self.mediaPlayer.setMuted(True)

    def slider_released(self):
        self.mediaPlayer.setMuted(False)
        self.update_current_position()

    def update_current_position(self):
        position = self.mediaPlayer.position()
        if self.playStatus == 0:
            position = self.current_position
        self.positionSlider.setValue(position)

        current_time = QtCore.QTime(0, 0)
        current_time = current_time.addMSecs(position)
        self.timeElapsed.setText(current_time.toString("mm:ss"))

    #Зацикливание трека и плейлиста
    def media_status_changed(self, status):
        current_row = self.songsList.currentRow()
        if status == QtMultimedia.QMediaPlayer.EndOfMedia and current_row + 1 != self.songsList.count():
            if self.repeatStatus == 0:
                self.next_track()
            elif self.repeatStatus == 1:
                self.current_position = 0
                self.playStatus = 0
                self.play()
            else:
                self.next_track()
        elif status == QtMultimedia.QMediaPlayer.EndOfMedia and current_row + 1 == self.songsList.count():
            if self.repeatStatus == 2:
                self.songsList.setCurrentRow(0)
                self.current_position = 0
                self.playStatus = 0
                self.play()
            else:
                self.playStatus = 0
                self.set_button_play_style()

    def change_repeat_status(self):
        self.repeatStatus += 1
        if self.repeatStatus == 3:
            self.repeatStatus = 0
        self.set_repeat_style()

    @staticmethod
    def get_artist(file_path):
        audiofile = eyed3.load(file_path)
        if audiofile.tag:
            artist = audiofile.tag.artist
            return artist
        else:
            return "Unknown"

    @staticmethod
    def get_title(file_path):
        audiofile = eyed3.load(file_path)
        if audiofile.tag:
            title = audiofile.tag.title
            return title
        else:
            return "Unknown"

    @staticmethod
    def get_picture(file_path):
        audiofile = mutagen.File(file_path)
        default_pic_path = 'pic/default_pic.png'
        try:
            for tag in audiofile.items():
                if tag[0][:4] == 'APIC':
                    pic = tag[1]
                    img = Image.open(BytesIO(pic.data))
                    img = img.resize((310, 310), Image.Resampling.LANCZOS)
                    img.save("temp_cover.jpg")
                    return QPixmap("temp_cover.jpg")
            return QtGui.QPixmap(default_pic_path)
        except Exception as e:
            print(f"ошибка в get_picture: {e}")

    def set_info(self, file_path):
        self.musicName.setText(Player.get_title(file_path))
        self.singerName.setText(Player.get_artist(file_path))
        pixmap = Player.get_picture(file_path)
        if pixmap:
            self.musicPicture.setPixmap(pixmap)

    def set_button_play_style(self):
        if self.playStatus == 0:
            self.buttonPlay.setStyleSheet("QPushButton{\n"
                                          "    border-image: url(pic/play.png);\n"
                                          "}\n"
                                          "QPushButton:hover{\n"
                                          "    border-image: url(pic/play_hover.png);\n"
                                          "}\n"
                                          "QPushButton:pressed{\n"
                                          "    border-image: url(pic/play_pressed.png);\n"
                                          "}")
        else:
            self.buttonPlay.setStyleSheet("QPushButton{\n"
                                          "    border-image: url(pic/pause.png);\n"
                                          "}\n"
                                          "QPushButton:hover{\n"
                                          "    border-image: url(pic/pause_hover.png);\n"
                                          "}\n"
                                          "QPushButton:pressed{\n"
                                          "    border-image: url(pic/pause_pressed.png);\n"
                                          "}")

    def set_repeat_style(self):
        if self.repeatStatus == 0:
            self.buttonRepeat.setStyleSheet("QPushButton{\n"
                                            "    border-image: url(pic/repeat.png);\n"
                                            "}\n"
                                            "QPushButton:hover{\n"
                                            "    border-image: url(pic/repeat_hover.png);\n"
                                            "}\n"
                                            "QPushButton:pressed{\n"
                                            "    border-image: url(pic/repeat.png);\n"
                                            "}")

        elif self.repeatStatus == 1:
            self.buttonRepeat.setStyleSheet("QPushButton{\n"
                                            "    border-image: url(pic/repeat1.png);\n"
                                            "}\n"
                                            "QPushButton:hover{\n"
                                            "    border-image: url(pic/repeat1_hover.png);\n"
                                            "}\n"
                                            "QPushButton:pressed{\n"
                                            "    border-image: url(pic/repeat1.png);\n"
                                            "}")

        elif self.repeatStatus == 2:
            self.buttonRepeat.setStyleSheet("QPushButton{\n"
                                            "    border-image: url(pic/repeat2.png);\n"
                                            "}\n"
                                            "QPushButton:hover{\n"
                                            "    border-image: url(pic/repeat2_hover.png);\n"
                                            "}\n"
                                            "QPushButton:pressed{\n"
                                            "    border-image: url(pic/repeat2.png);\n"
                                            "}")
Top