Question

我希望有一个喜欢和不喜欢的按钮，当点击其中一个时，它会将颜色更改为红色。但是，当我点击两者时，喜欢和不喜欢的图标都会变成红色。我希望其中只有一个在任何时候都是红色的，而不是两个都是。我该如何解决？

我想知道我是否可以通过在Jquery OR中使用CSS和.hasClass，.removeClass和.addClass来缩短代码。

下面是我写的jQuery代码：

$('#Like').on({
'click': function() {
    if($('#Like').attr('src') == 'images/Like.png') {
        $('#Like').attr('src','images/Liked.png');
        $('#Dislike').attr('src') == 'images/Dislike.png');
    }
    else {
        $('#Like').attr('src','images/Like.png');
    }
}
});

$('#Dislike').on({
'click': function() {
    if($('#Dislike').attr('src') == 'images/Dislike.png') {
        $('#Dislike').attr('src','images/Disliked.png');
        $('#heartLike').attr('src') == 'images/Like.png');
    }
    else {
        $('#Dislike').attr('src','images/Dislike.png');
    }
}
});

在这里，＃like和#dislike是原始的喜欢和不喜欢的图标。

Like.png和Dislike.png是没有颜色的图像，Liked.png和Disliked.png是填充红色的图像。

Answer 1

您应该使用公共类来绑定点击处理程序，特定类，即like和dislike CSS类的状态，我还建议您使用CSS规则显示icon。这是一个通用的例子

＆＃13;

$('span.common').on('click', function() {
  $(this).toggleClass('like dislike')
});

＆＃13;

.like {
  background-color: green
}
.dislike {
  background-color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="common like">loren</span>
<br />
<span class="common dislike">ipsum</span>

＆＃13;

Answer 2

$('#Like').on({
'click': function() {
    if($('#Like').attr('src') == 'images/Like.png') {
        $('#Like').attr('src','images/Liked.png');
        $('#Dislike').attr('src','images/Dislike.png');
    }
    else {
        $('#Like').attr('src','images/Like.png');
    }
}
});

$('#Dislike').on({
'click': function() {
    if($('#Dislike').attr('src') == 'images/Dislike.png') {
        $('#Dislike').attr('src','images/Disliked.png');
        $('#heartLike').attr('src','images/Like.png');
    }
    else {
        $('#Dislike').attr('src','images/Dislike.png');
    }
}
});

Answer 3

试试这个，你在代码中使用了不同的ID代码。在不喜欢点击时你改变了heartLike的url，将其更改为Like。

 self.districtTableView.register(UINib(nibName: "PlaceCollectionViewCell", bundle: nil), forCellReuseIdentifier: "placeCell")

 func textFieldShouldBeginEditing(_ textField: UITextField) -> Bool {
    return false
}

func textFieldDidEndEditing(_ textField: UITextField) {
    // TODO: Your app can do something when textField finishes editing

    print("The textField ended editing. Do something based on app requirements.")
}

func numberOfSections(in tableView: UITableView) -> Int {
     return 1
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return districts.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "placeCell") as! PlaceTableViewCell
    // Set text from the data model
    cell.distLabel.text = districts[indexPath.row]
    cell.textLabel?.font = distTextField.font
    return cell

祝你好运：）

喜欢/不喜欢jQuery中的按钮系统

3 个答案: