87,989
社区成员
发帖
与我相关
我的任务
分享Jquery 如何获取div中 title的值
<div class="screen">
<div title="Photo Gallery" class="icon" style="background-image: url("assets/img/icons/Photos.png");"/>
<div title="Google Maps" class="icon" style="background-image: url("assets/img/icons/Maps.png");"/>
</div>
我想点击某个div 获取被点 title中的 Photo Gallery 的值
<script language="javascript" type="text/javascript">
$(function () { // dom元素加载完毕
$("div>div").click(function () {//获取页面中的所有p元素 , 给每一个p元素添加onclick事件.
var kk = $(this).attr("title");
alert(kk);
})
})
</script>
这个是我写的，获取不到，请教一下各位
<div title="Photo Gallery" class="icon" style="background-image: url("assets/img/icons/Photos.png");"/>
<div title="Google Maps" class="icon" style="background-image: url("assets/img/icons/Maps.png");"/>
</div>
我想点击某个div 获取被点 title中的 Photo Gallery 的值
<script language="javascript" type="text/javascript">
$(function () { // dom元素加载完毕
$("div>div").click(function () {//获取页面中的所有p元素 , 给每一个p元素添加onclick事件.
var kk = $(this).attr("title");
alert(kk);
})
})
</script>
这个是我写的，获取不到，请教一下各位
...全文
请发表友善的回复…
发表回复
古龙老子 2012-01-18
- 打赏
- 举报
Chinajiyong 谢谢了，这样的方法是可以实现的，但是我那个页面就是拿不到值，我自己试试吧
chenzhongwei99 2012-01-17
- 打赏
- 举报
我自己写的 我试验过了 好用的！
<div id="c">
<div title="Photo Gallery" class="a">aaaa</div>
<div title="Google Maps" class="b">bbbb</div>
</div>
<script type="text/javascript">
$(function(){
$("#c .a").click(function(){
$a=$(this);
$b=$a.attr("title");
alert($b);
})
})
</script>
<div id="c">
<div title="Photo Gallery" class="a">aaaa</div>
<div title="Google Maps" class="b">bbbb</div>
</div>
<script type="text/javascript">
$(function(){
$("#c .a").click(function(){
$a=$(this);
$b=$a.attr("title");
alert($b);
})
})
</script>
三石-gary 2012-01-17
- 打赏
- 举报
[Quote=引用 5 楼 woaini314 的回复:]
每个div要有对应的</div>闭合标签，不能写成空元素<div />
js这么写应该可以
[/Quote]
+1
每个div要有对应的</div>闭合标签，不能写成空元素<div />
js这么写应该可以
[/Quote]
+1
w290601645 2012-01-17
- 打赏
- 举报
你的div中没有内容
这样 是可以的
<div class="screen">
<div title="Photo Gallery" class="icon" style="background-image: url("assets/img/icons/Photos.png");">Photo Gallery</div>
<div title="Google Maps" class="icon" style="background-image: url("assets/img/icons/Maps.png");">Google Maps</div>
</div>
这样 是可以的
caibird1024 2012-01-17
- 打赏
- 举报
每个div要有对应的</div>闭合标签，不能写成空元素<div />
js这么写应该可以
js这么写应该可以
qiwen29749 2012-01-17
- 打赏
- 举报
<div class="screen">
<div title="Photo Gallery" class="icon" style="background-image: url('assets/img/icons/Photos.png');"> </div>
<div title="Google Maps" class="icon" style="background-image: url('assets/img/icons/Maps.png');"> </div>
</div>
leffort 2012-01-17
- 打赏
- 举报
能不能描述清楚点？
“我想点击某个div 获取被点 title中的 Photo Gallery 的值”？？？？
“我想点击某个div 获取被点 title中的 Photo Gallery 的值”？？？？
古龙老子 2012-01-17
- 打赏
- 举报
有没有人呀？
古龙老子 2012-01-17
- 打赏
- 举报
都回家过年了吗？
EnForGrass 2012-01-17
- 打赏
- 举报
[Quote=引用 15 楼 zhuguibiao 的回复:]
怎么样遍历法呢？
[/Quote]
我看错了，$("div>div")这个就是遍历div下所有的div
怎么样遍历法呢？
[/Quote]
我看错了，$("div>div")这个就是遍历div下所有的div
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("div>div").click(function () {
var kk = $(".icon").attr("title");
alert(kk);
})
})
</script>
<style type="text/css">
.icon
{
color: Red;
}
</style>
<div>
<div title="PhotoGallery" class="icon">
dvzvc</div>
<div title="GoogleMaps" class="icon"">
vzxvc</div>
</div>
古龙老子 2012-01-17
- 打赏
- 举报
怎么样遍历法呢？
EnForGrass 2012-01-17
- 打赏
- 举报
[Quote=引用 13 楼 zhuguibiao 的回复:]
我改了一下
<script language="javascript" type="text/javascript">
$(function () {
$("div>div").click(function () {
var kk = $(".icon").attr("title");
……
[/Quote]
遍历div，再用你上面的代码
我改了一下
<script language="javascript" type="text/javascript">
$(function () {
$("div>div").click(function () {
var kk = $(".icon").attr("title");
……
[/Quote]
遍历div，再用你上面的代码
古龙老子 2012-01-17
- 打赏
- 举报
我改了一下
<script language="javascript" type="text/javascript">
$(function () {
$("div>div").click(function () {
var kk = $(".icon").attr("title");
alert(kk);
})
})
</script>
可是这样总是拿到第一个值 Photo Gallery 为什么呢？
<script language="javascript" type="text/javascript">
$(function () {
$("div>div").click(function () {
var kk = $(".icon").attr("title");
alert(kk);
})
})
</script>
可是这样总是拿到第一个值 Photo Gallery 为什么呢？
zhy77117178 2012-01-17
- 打赏
- 举报
怎么有点看不懂呢！
EnForGrass 2012-01-17
- 打赏
- 举报
[Quote=引用 10 楼 zhuguibiao 的回复:]
我上面的是通过 给 class="icon" 加事件，点击就获取 title 属性值
[/Quote]
var kk = $(this).attr("title");
估计和页面的<title>模仿苹果ios主屏图标滑动切换效果 - 分享JavaScript-sharejs.com</title>冲突了
var kk = $(“#div”).attr("title");指定处理的具体div
我上面的是通过 给 class="icon" 加事件，点击就获取 title 属性值
[/Quote]
var kk = $(this).attr("title");
估计和页面的<title>模仿苹果ios主屏图标滑动切换效果 - 分享JavaScript-sharejs.com</title>冲突了
var kk = $(“#div”).attr("title");指定处理的具体div
古龙老子 2012-01-17
- 打赏
- 举报
我上面的是通过 给 class="icon" 加事件，点击就获取 title 属性值
古龙老子 2012-01-17
- 打赏
- 举报
我的其他测试页面可以，和这个整合就不行了
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模仿苹果ios主屏图标滑动切换效果 - 分享JavaScript-sharejs.com</title>
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" />
<link rel="stylesheet" href="assets/css/styles.css" />
<script type="text/javascript" src="assets/js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-1.3.1.js"></script>
<!-- <script language="javascript" type="text/javascript">
$(function () { // dom元素加载完毕
$("div>div").click(function () {//获取页面中的所有p元素 , 给每一个p元素添加onclick事件.
var kk = $(this).attr("title");
alert(kk);
})
})
</script>-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section id="homeScreen">
<div id="mask">
<div id="allScreens">
<script type="text/javascript">
$(".icon").click(function () {
alert($(this).attr("title"));
})
</script>
</div>
</div>
<ul id="indicators"></ul>
<div id="dock"></div>
</section>
<!-- JavaScript includes -->
<script type="text/javascript" src="assets/js/touchable.js"></script>
<script type="text/javascript" src="assets/js/coffee-script.js"></script>
<script type="text/coffeescript">
# The Icon class.
class Icon
# The constructor. The -> arrow signifies
# a function definition.
constructor: (@id, @title) ->
# @ is synonymous for "this". The id and title parameters
# of the construtor are automatically added as this.id and this.title
# @markup holds the HTML of the icon. It is
# transformed to this.markup behind the scenes.
@markup = "<div class='icon' style='background-image:url(assets/img/icons/#{@id}.png)' title='#{@title}'>ffff</div>"
# The DockIcon class inherits from Icon
class DockIcon extends Icon
constructor: (id, title)->
# This calls the constructor if Icon
super(id, title)
# Changing the class name of the generated HTML
@markup = @markup.replace("class='icon'","class='dockicon'")
# The Screen Class
class Screen
# Function arguments can have default parameters
constructor: (icons = [])->
@icons = icons
attachIcons: (icons = [])->
Array.prototype.push.apply(@icons, icons)
generate: ->
markup = []
# Looping through the @icons array
markup.push(icon.markup) for icon in @icons
# The last line of every function is implicitly returned
"<div class='screen'>#{markup.join('')}</div>"
class Stage
# The width of our "device" screen. This is
# basically the width of the #mask div.
screenWidth: 332
constructor: (icons)->
@currentScreen = 0
@screens = []
# Calculating the number of screens
# necessary to display all the icons
num = Math.ceil(icons.length / 9)
i = 0
while num--
# we pass a slice of the icons array
s = new Screen(icons[i...i+9])
# adding the screen to the local screens array
@screens.push(s)
i+=9
# This method populates the passed element with HTML
addScreensTo: (element)->
@element = $(element)
@element.width(@screens.length*@screenWidth)
for screen in @screens
@element.append(screen.generate())
addIndicatorsTo: (elem)->
# This method creates the small
# circular indicatiors
@ul = $(elem)
for screen in @screens
@ul.append('<li>')
@ul.find('li:first').addClass('active');
goTo: (screenNum)->
# This method animates the allScreen div in
# order to expose the needed screen in #mask
if @element.is(':animated')
return false
# if this is the first or last screen,
# run the end of scroll animation
if @currentScreen == screenNum
# Parallel assignment:
[from, to] = ['+=15','-=15']
if @currentScreen != 0
[from, to] = [to, from]
@element.animate( { marginLeft : from }, 150 )
.animate( { marginLeft : to }, 150 )
else
# If everything is ok, animate the transition between the screens.
# The fat arrow => preserves the context of "this"
@element.animate( { marginLeft:-screenNum*@screenWidth }, => @currentScreen = screenNum )
@ul.find('li').removeClass('active').eq(screenNum).addClass('active');
next: ->
toShow = @currentScreen+1
# If there is no next screen, show
# the current one
if toShow == @screens.length
toShow = @screens.length - 1
@goTo(toShow)
previous: ->
toShow = @currentScreen-1
# If there is no previous screen,
# show the current one
if toShow == -1
toShow = 0
@goTo(toShow)
# This is equivalent to $('document').ready(function(){}):
$ ->
allIcons = [
new Icon('Photos', 'Photo Gallery'), new Icon('Maps', 'Google Maps')
new Icon('Chuzzle', 'Chuzzle'), new Icon('Safari', 'Safari')
new Icon('Weather', 'Weather'), new Icon('nes', 'NES Emulator')
new Icon('Calendar', 'Calendar'), new Icon('Clock', 'Clock')
new Icon('BossPrefs', 'Boss Prefs'), new Icon('Chess', 'Chess')
new Icon('Mail', 'Mail'), new Icon('Phone', 'Phone')
new Icon('SMS', 'SMS Center'), new Icon('Camera', 'Camera')
new Icon('iPod', 'iPod'), new Icon('Calculator', 'Calculator')
new Icon('Music', 'Music'), new Icon('Poof', 'Poof')
new Icon('Settings', 'Settings'), new Icon('YouTube', 'Youtube')
new Icon('psx4all', 'PSx4All'), new Icon('VideoRecorder', 'Record Video')
new Icon('Installer', 'Installer'), new Icon('Notes', 'Notes')
new Icon('RagingThunder', 'RagingThunder'), new Icon('Stocks', 'Stocks')
new Icon('genesis4iphone', 'Genesis'), new Icon('snes4iphone', 'SNES Emulator')
new Icon('Calendar', 'Calendar'), new Icon('Clock', 'Clock')
new Icon('Photos', 'Photo Gallery'), new Icon('Maps', 'Google Maps')
]
dockIcons = [
new DockIcon('Camera', 'Camera')
new DockIcon('iPod', 'iPod')
new DockIcon('Calculator', 'Calculator')
]
allScreens = $('#allScreens')
# Using the Touchable plugin to listen for
# touch based events:
allScreens.Touchable();
# Creating a new stage object
stage = new Stage(allIcons)
stage.addScreensTo(allScreens)
stage.addIndicatorsTo('#indicators')
# Listening for the touchablemove event.
# Notice the callback function
allScreens.bind 'touchablemove', (e,touch)->
stage.next() if touch.currentDelta.x < -5
stage.previous() if touch.currentDelta.x > 5
# Adding the dock icons:
dock = $('#dock')
for icon in dockIcons
dock.append(icon.markup)
</script>
</body>
</html>
不知道是不是Jquery 冲突了，请大家帮瞧瞧
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模仿苹果ios主屏图标滑动切换效果 - 分享JavaScript-sharejs.com</title>
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" />
<link rel="stylesheet" href="assets/css/styles.css" />
<script type="text/javascript" src="assets/js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-1.3.1.js"></script>
<!-- <script language="javascript" type="text/javascript">
$(function () { // dom元素加载完毕
$("div>div").click(function () {//获取页面中的所有p元素 , 给每一个p元素添加onclick事件.
var kk = $(this).attr("title");
alert(kk);
})
})
</script>-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section id="homeScreen">
<div id="mask">
<div id="allScreens">
<script type="text/javascript">
$(".icon").click(function () {
alert($(this).attr("title"));
})
</script>
</div>
</div>
<ul id="indicators"></ul>
<div id="dock"></div>
</section>
<!-- JavaScript includes -->
<script type="text/javascript" src="assets/js/touchable.js"></script>
<script type="text/javascript" src="assets/js/coffee-script.js"></script>
<script type="text/coffeescript">
# The Icon class.
class Icon
# The constructor. The -> arrow signifies
# a function definition.
constructor: (@id, @title) ->
# @ is synonymous for "this". The id and title parameters
# of the construtor are automatically added as this.id and this.title
# @markup holds the HTML of the icon. It is
# transformed to this.markup behind the scenes.
@markup = "<div class='icon' style='background-image:url(assets/img/icons/#{@id}.png)' title='#{@title}'>ffff</div>"
# The DockIcon class inherits from Icon
class DockIcon extends Icon
constructor: (id, title)->
# This calls the constructor if Icon
super(id, title)
# Changing the class name of the generated HTML
@markup = @markup.replace("class='icon'","class='dockicon'")
# The Screen Class
class Screen
# Function arguments can have default parameters
constructor: (icons = [])->
@icons = icons
attachIcons: (icons = [])->
Array.prototype.push.apply(@icons, icons)
generate: ->
markup = []
# Looping through the @icons array
markup.push(icon.markup) for icon in @icons
# The last line of every function is implicitly returned
"<div class='screen'>#{markup.join('')}</div>"
class Stage
# The width of our "device" screen. This is
# basically the width of the #mask div.
screenWidth: 332
constructor: (icons)->
@currentScreen = 0
@screens = []
# Calculating the number of screens
# necessary to display all the icons
num = Math.ceil(icons.length / 9)
i = 0
while num--
# we pass a slice of the icons array
s = new Screen(icons[i...i+9])
# adding the screen to the local screens array
@screens.push(s)
i+=9
# This method populates the passed element with HTML
addScreensTo: (element)->
@element = $(element)
@element.width(@screens.length*@screenWidth)
for screen in @screens
@element.append(screen.generate())
addIndicatorsTo: (elem)->
# This method creates the small
# circular indicatiors
@ul = $(elem)
for screen in @screens
@ul.append('<li>')
@ul.find('li:first').addClass('active');
goTo: (screenNum)->
# This method animates the allScreen div in
# order to expose the needed screen in #mask
if @element.is(':animated')
return false
# if this is the first or last screen,
# run the end of scroll animation
if @currentScreen == screenNum
# Parallel assignment:
[from, to] = ['+=15','-=15']
if @currentScreen != 0
[from, to] = [to, from]
@element.animate( { marginLeft : from }, 150 )
.animate( { marginLeft : to }, 150 )
else
# If everything is ok, animate the transition between the screens.
# The fat arrow => preserves the context of "this"
@element.animate( { marginLeft:-screenNum*@screenWidth }, => @currentScreen = screenNum )
@ul.find('li').removeClass('active').eq(screenNum).addClass('active');
next: ->
toShow = @currentScreen+1
# If there is no next screen, show
# the current one
if toShow == @screens.length
toShow = @screens.length - 1
@goTo(toShow)
previous: ->
toShow = @currentScreen-1
# If there is no previous screen,
# show the current one
if toShow == -1
toShow = 0
@goTo(toShow)
# This is equivalent to $('document').ready(function(){}):
$ ->
allIcons = [
new Icon('Photos', 'Photo Gallery'), new Icon('Maps', 'Google Maps')
new Icon('Chuzzle', 'Chuzzle'), new Icon('Safari', 'Safari')
new Icon('Weather', 'Weather'), new Icon('nes', 'NES Emulator')
new Icon('Calendar', 'Calendar'), new Icon('Clock', 'Clock')
new Icon('BossPrefs', 'Boss Prefs'), new Icon('Chess', 'Chess')
new Icon('Mail', 'Mail'), new Icon('Phone', 'Phone')
new Icon('SMS', 'SMS Center'), new Icon('Camera', 'Camera')
new Icon('iPod', 'iPod'), new Icon('Calculator', 'Calculator')
new Icon('Music', 'Music'), new Icon('Poof', 'Poof')
new Icon('Settings', 'Settings'), new Icon('YouTube', 'Youtube')
new Icon('psx4all', 'PSx4All'), new Icon('VideoRecorder', 'Record Video')
new Icon('Installer', 'Installer'), new Icon('Notes', 'Notes')
new Icon('RagingThunder', 'RagingThunder'), new Icon('Stocks', 'Stocks')
new Icon('genesis4iphone', 'Genesis'), new Icon('snes4iphone', 'SNES Emulator')
new Icon('Calendar', 'Calendar'), new Icon('Clock', 'Clock')
new Icon('Photos', 'Photo Gallery'), new Icon('Maps', 'Google Maps')
]
dockIcons = [
new DockIcon('Camera', 'Camera')
new DockIcon('iPod', 'iPod')
new DockIcon('Calculator', 'Calculator')
]
allScreens = $('#allScreens')
# Using the Touchable plugin to listen for
# touch based events:
allScreens.Touchable();
# Creating a new stage object
stage = new Stage(allIcons)
stage.addScreensTo(allScreens)
stage.addIndicatorsTo('#indicators')
# Listening for the touchablemove event.
# Notice the callback function
allScreens.bind 'touchablemove', (e,touch)->
stage.next() if touch.currentDelta.x < -5
stage.previous() if touch.currentDelta.x > 5
# Adding the dock icons:
dock = $('#dock')
for icon in dockIcons
dock.append(icon.markup)
</script>
</body>
</html>
不知道是不是Jquery 冲突了，请大家帮瞧瞧
