HTML单击div，然后突出显示

Question

我已经使用弹性盒创建了这个

.itemy:hover {
  background-color: #7f7f7f;
}

<div class="drinkDisplay">
  <?php
    if($arr5!=="Drinks" && $arr5!=="Add Ons" && $arr5!=="A la carte" && $arr5!=="Dessesrts"){
      for($i=0;$i<$numrowsDrinks;$i++){
        echo "<div id='$drinkId[$i]' class='itemy'> 
                  <img src= $drinkImage[$i] alt = $drinkName[$i]>                       <div class='textcontainer'><p>$drinkName[$i]<br>PHP +$drinkPrice[$i]</p></div></div>";
                    }

                }
              ?>
</div>

现在，当鼠标悬停时，它将突出显示该项目。但是我想当我单击div（itemy）时将保留该突出显示。我已经尝试了以下js代码，但是单击后它不会保留高亮显示。（如下所示）

var addclass = 'color';
var $cols = $('.itemy').click(function() {
  $cols.removeClass(addclass);
  $(this).addClass(addclass);
});

.color {
  background-color: #7f7f7f;
}

我也想稍后访问用户突出显示的div的数据，例如，说用户单击按钮时，我想让我们说出所选div的ID。

非常感谢您的帮助

Answer 1

虽然我没有要验证的整个CSS文件，但是public class LoginFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment Button btn; View vista = inflater.inflate(R.layout.fragment_login, container, false); btn = (Button)vista.findViewById(R.id.btn_login); btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View vista) { //cargarWebService(); //name.setText(""); //email.setText(""); Toast.makeText(getContext(), "Se ah registrado exitosamente", Toast.LENGTH_SHORT).show(); } }); return inflater.inflate(R.layout.fragment_login, container, false); } } 类可能没有足够高的特异性来覆盖原始的.color样式。

尝试将.itemy类声明更改为更具体，例如...

.color

这要求元素既是.itemy.color { background-color: #7f7f7f; } 又是itemy，所以它更具体。较旧的浏览器不完全支持此功能，但是还有其他增加特异性的方法，这些方法更向后兼容（例如，指定父元素，例如color）

Answer 2

使用两种颜色进行着色-一种用于onHover事件，例如“悬停”，另一种用于长期选择，例如“ selected”。

发生悬停时，就像所有操作一样，从所有按钮中删除hovered类，然后将其添加到正在悬停的按钮中。用户单击时，请改为添加selected类，以使悬停不会干扰选择。

var hoverClass = "hovered";
var selectionClass = "selected";
//code for hover
$('.itemy').hover( function() {
    $('.itemy').removeClass(hoverClass);
    $(this).addClass(hoverClass);
});
//code for clicking if you want to be able to select multiple items
$('.itemy').click( function() {
    $(this).toggleClass(selectionClass);
});
//code for clicking if you want to be able to select only a single item
$('.itemy').click( function() {
    $('.itemy').removeClass(selectionClass);
    $(this).addClass(selectionClass);
});

根据需要为两个类设置CSS。如果希望相同，甚至可以为多个选择器设置相同的CSS，如下所示：

.hovered, .selected {
    //...your style here
}

Answer 3

您的监听器“单击” 必须进入文档准备就绪功能（see details）。

您的CSS特定属性可以与 @override Widget build(BuildContext context) { return Stack( children: <Widget>[ Align( alignment: Alignment.bottomCenter, child: Image.network( "https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=350"), ), Scaffold( backgroundColor: Colors.transparent, bottomNavigationBar: BottomAppBar( color: Theme.of(context).accentColor, shape: CircularNotchedRectangle(), child: Row( children: <Widget>[ IconButton( icon: Icon(Icons.access_alarm), onPressed: () => null, ), IconButton( icon: Icon(Icons.sms_failed), onPressed: () => null, ), ], ), ), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, floatingActionButton: FloatingActionButton( backgroundColor: Theme.of(context).primaryColor, child: Center( child: Icon( Icons.add, size: 32.0, ), ), onPressed: () { /* Navigator.push( context, MaterialPageRoute(builder: (context) => CreateEvent()), );*/ }, ), ), ], ); 或.color一起使用。

在Java语言跟随代码片段的末尾，我添加了一个函数来获取所选的项目ID ：）希望对您有所帮助。

.itemy:hover

$(document).ready(function() {
  var addclass = 'color';
  var $cols = $('.itemy').click(function() {
    $cols.removeClass(addclass);
    $(this).addClass(addclass);
  });
});

function getSelectedItemId() {
  var id = $('.color').attr("id");
  $('.result').html(id);
}

.color,
.itemy:hover {
  background-color: red;
}

感谢@Tyler提供其他信息。

Answer 4

感谢大家对我的耐心配合。

$(".itemy").on("click", function() {
      $(".itemy").css("background-color","");
      $(this).css("background-color", "red");

这是为我工作的代码:)我现在就可以单击它，谢谢！ ：）

此代码仍然有一个小问题，它可以让您突出显示多个项目，并且只能是一个。我将继续寻找答案。

edit：现在可以完全使用上面的代码了；

Answer 5

最简单的解决方案：

var addclass = 'color';
var $cols = $('.itemy').on('click hover', function() {
  $(this).addClass(addclass);
});

最佳：

var addclass = 'color';
var $cols = $('.drinkDisplay').on('click hover', '.itemy', function() {
  $(this).addClass(addclass);
});

稍后通过js访问：

var addclass = 'color';
var $cols = $('.drinkDisplay .itemy').filter(function( index ) {
  return $(this).hasClass(addclass);
})