将文本设置为子节点

时间:2018-04-08 08:34:46

标签: javascript jquery html

我正在创建一些元素(onclick文本会改变),当一个元素悬停时,我希望显示onclick文本,所以我尝试了这样的事情:
请注意,这是一个例子," aFunction"并且它将返回一个值,因此在此示例中该函数是必需的。



function aFunction(a) {
	return `it works! ${a}`;
}

$('.hastooltip').children("div").on('mouseover', function() {
    console.log(aFunction($(this).attr("onclick"))); // it gets the text successfully
    $(this).children("span").text(aFunction($(this).attr("onclick"))); // but doesn't set it
});

.hastooltip{
  cursor: pointer;
}

.hastooltip:hover .tooltip {
  display: block;
  color: black;
}


.tooltip {
  position: absolute;
  white-space: nowrap;
  display: none;
  background: #ff0000;
  border: 1px solid black;
  padding: 1px;
  z-index: 1000;
}

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<span class="hastooltip">
  <div id="first-div" onclick="alert('a')">foo</div>
  <span class="tooltip">1</span>
</span>
<span class="hastooltip">
  <div id="second-div" onclick="alert('b')">bar</div>
  <span class="tooltip">2</span>
</span>
<span class="hastooltip">
  <div id="third-div" onclick="alert('c')">baz</div>
  <span class="tooltip">3</span>
</span>
&#13;
&#13;
&#13;

但是,当元素悬停时,悬停框中的文本不会被替换。我做错了什么?

2 个答案:

答案 0 :(得分:3)

它无效,因为.defaultSuccessUrl("/") <span>不是siblings(),请尝试:

children
function aFunction(a) {
	return `it works! ${a}`;
}

$('.hastooltip').children("div").on('mouseover', function() {
    console.log(aFunction($(this).attr("onclick"))); // it gets the text successfully
    $(this).siblings("span").text(aFunction($(this).attr("onclick"))); // but doesn't set it
});
.hastooltip{
  cursor: pointer;
}

.hastooltip:hover .tooltip {
  display: block;
  color: black;
}


.tooltip {
  position: absolute;
  white-space: nowrap;
  display: none;
  background: #ff0000;
  border: 1px solid black;
  padding: 1px;
  z-index: 1000;
}

答案 1 :(得分:0)

public class MyListAdapter extends ArrayAdapter<Hero> { //the list values in the List of type hero List<Hero> heroList; //activity context Context context; //the layout resource file for the list items int resource; //constructor initializing the values public MyListAdapter(Context context, int resource, List<Hero> heroList) { super(context, resource, heroList); this.context = context; this.resource = resource; this.heroList = heroList; } //this will return the ListView Item as a View @NonNull @Override public View getView(final int position, @Nullable View convertView, @NonNull ViewGroup parent) { //we need to get the view of the xml for our list item //And for this we need a layoutinflater LayoutInflater layoutInflater = LayoutInflater.from(context); //getting the view View view = layoutInflater.inflate(resource, null, false); //getting the view elements of the list from the view ImageView imageView = view.findViewById(R.id.imageView); TextView textViewName = view.findViewById(R.id.textViewName); TextView textViewTeam = view.findViewById(R.id.textViewTeam); Button test = view.findViewById(R.id.buttonDelete); //getting the hero of the specified position Hero hero = heroList.get(position); //adding values to the list item imageView.setImageDrawable(context.getResources().getDrawable(hero.getImage())); textViewName.setText(hero.getName()); textViewTeam.setText(hero.getTeam()); //adding a click listener to the button to remove item from the list test.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MyListAdapter.this, Login.class); startActivity(intent); } }); return view; } 是您要选择的this旁边的<div>,因此<span>无法找到它。请改用.children()

.siblings()
function aFunction(a) {
  return `it works! ${a}`;
}

$('.hastooltip').children("div").on('mouseover', function() {
  var text = aFunction($(this).attr("onclick"))
  console.log(text); // it gets the text successfully
  $(this).siblings(".tooltip").text(text); // but doesn't set it
});
.hastooltip {
  cursor: pointer;
}

.hastooltip:hover .tooltip {
  display: block;
  color: black;
}

.tooltip {
  position: absolute;
  white-space: nowrap;
  display: none;
  background: #ff0000;
  border: 1px solid black;
  padding: 1px;
  z-index: 1000;
}